vue3-draggable-resizable-feat/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;
  background: #f0f0f0;
  border: 1px solid #333;
  opacity: 0;
}

.vdr-handle-tl {
  top: -6px;
  left: -4px;
  width: 8px;
  height: 8px;
  cursor: nw-resize;
}

.vdr-handle-tm {
  top: -6px;
  left: 4px;
  right: 4px;
  cursor: n-resize;
  height: 8px;
}

.vdr-handle-tr {
  top: -6px;
  right: -4px;
  width: 8px;
  height: 8px;
  cursor: ne-resize;
}

.vdr-handle-ml {
  top: 50%;
  left: -4px;
  width: 6px;
  top: 2px;
  bottom: 4px;
  cursor: w-resize;
}

.vdr-handle-mr {
  top: 2px;
  bottom: 4px;
  width: 6px;
  right: -4px;
  cursor: e-resize;
}

.vdr-handle-bl {
  width: 8px;
  height: 8px;
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}

.vdr-handle-bm {
  bottom: -4px;
  left: 50%;
  height: 8px;
  left: 4px;
  right: 4px;
  cursor: s-resize;
}

.vdr-handle-br {
  bottom: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  cursor: se-resize;
}

.vdr-header {
  background-color: #dedede;
  height: 2em;
  line-height: 2em;
  cursor: move;
}