Vue 实现一个拖拽功能（指令）-526互联

用 Vue 实现一个拖拽功能，以指令的方式被调用。使用 Vue 的自定义指令（directive）来实现拖拽功能。一下是 Vue 代码示例：

<template>
  <div>
    <div v-draggable>拖拽我</div>
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      mounted(el) {
        let isDragging = false;
        let offset = { x: 0, y: 0 };

        el.addEventListener("mousedown", handleMouseDown);
        el.addEventListener("mousemove", handleMouseMove);
        el.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;

          el.style.left = x + "px";
          el.style.top = y + "px";
        }

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

在上面的示例中，我们定义了一个名为 "draggable" 的自定义指令，并将其应用到需要支持拖拽的元素上。在指令的 mounted 钩子中，我们添加了鼠标事件监听器，从而实现了元素的拖拽功能。通过计算鼠标位置和初始偏移量，我们可以在鼠标移动的过程中更新元素的位置。

指令