vue实现拖拉拽功能

Vue可以通过使用指令和事件来实现拖拽功能。以下是一种常见的实现方式：

1. 在需要拖拽的元素上添加一个`v-draggable`指令，用于启用拖拽功能。

<div v-draggable>可拖拽的元素</div>

2. 创建一个自定义指令`v-draggable`，并在该指令中处理相关的事件和逻辑。

Vue.directive('draggable', {
  bind(el, binding, vnode) {
    el.style.position = 'absolute';
    el.style.cursor = 'move';

    const startX = 0;
    const startY = 0;

    const handleMouseDown = (e) => {
      startX = e.clientX - el.offsetLeft;
      startY = e.clientY - el.offsetTop;
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (e) => {
      el.style.left = e.clientX - startX + 'px';
      el.style.top = e.clientY - startY + 'px';
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    el.addEventListener('mousedown', handleMouseDown);
  },
});

3. 在Vue实例中使用自定义指令`v-draggable`。

<template>
  <div>
    <div v-draggable>可拖拽的元素</div>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

这样，当你在浏览器中拖动"可拖拽的元素"时，它会随着鼠标移动而改变位置。你可以根据自己的需求进行样式和逻辑的调整。