vue3-draggable-resizable/src/components/index.css

[Vue3 Component] 拖拽缩放并具有自动吸附对齐、参考线等功能

.vdr-container {
  position: absolute;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.vdr-container.active {
  border-color: #000;
  border-style: dashed;
}
.vdr-container.dragging {
  border-color: #000;
  border-style: solid;
}
.vdr-handle {
  box-sizing: border-box;
  position: absolute;
  width: 7px;
  height: 7px;
  background: #f0f0f0;
  border: 1px solid #333;
}
.vdr-handle-tl {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}
.vdr-handle-tm {
  top: -4px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}
.vdr-handle-tr {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}
.vdr-handle-ml {
  top: 50%;
  margin-top: -3px;
  left: -4px;
  cursor: w-resize;
}
.vdr-handle-mr {
  top: 50%;
  margin-top: -3px;
  right: -4px;
  cursor: e-resize;
}
.vdr-handle-bl {
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}
.vdr-handle-bm {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  cursor: s-resize;
}
.vdr-handle-br {
  bottom: -4px;
  right: -4px;
  cursor: se-resize;
}