Vue 实现一个拖拽功能并带边界检测（指令）

<template>
  <div>
    <div v-draggable class="draggable">拖拽我</div>
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      mounted(el) {
        let isDragging = false;
        let offset = { x: 0, y: 0 };
        const parentRect = el.parentNode.getBoundingClientRect(); // 获取父元素的边界信息

        el.addEventListener("mousedown", handleMouseDown);
        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);

        function handleMouseDown(event) {
          isDragging = true;
          offset.x = event.offsetX;
          offset.y = event.offsetY;
        }

        function handleMouseMove(event) {
          if (!isDragging) return;

          const x = event.clientX - offset.x;
          const y = event.clientY - offset.y;

          const minX = 0;
          const minY = 0;
          const maxX = parentRect.width - el.offsetWidth;
          const maxY = parentRect.height - el.offsetHeight;

          const boundedX = Math.max(minX, Math.min(x, maxX));
          const boundedY = Math.max(minY, Math.min(y, maxY));

          el.style.left = boundedX + "px";
          el.style.top = boundedY + "px";
        }

        function handleMouseUp() {
          isDragging = false;
        }
      },
    },
  },
};
</script>

<style>
.draggable {
  position: absolute;
  left: 0;
  top: 0;
  background-color: lightblue;
  width: 100px;
  height: 100px;
  cursor: move;
}
</style>