vue 拖拽drop

### 如何在 Vue.js 中实现 Drag and Drop 功能

为了在 Vue.js 应用程序中加入拖拽功能，可以利用 `vue-drag-and-drop` 插件来简化开发过程。此插件提供了一个指令用于赋予 HTML 元素以及数据之间的交互能力[^1]。

下面是一份基础实例代码片段，它展示了怎样通过上述提到的库创建具备基本拖放特性的组件：

<div id="app">
  <!-- 使用 vdr 指令定义可被拖动区域 -->
  <div :class="{ item: true, dragging: dragged === el }"
       @mousedown="startDrag(el)"
       @mouseup="endDrag()"
       @mousemove="onMove($event, el)"
       v-for="(el, index) in items" :key="index"
       v-dragscope>
    {{ el.name }}
  </div>

</div>

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { name: 'Item A' },
        { name: 'Item B' },
        { name: 'Item C' }
      ],
      dragged: null,
    };
  },
  methods: {
    startDrag(item) {
      this.dragged = item;
    },
    endDrag() {
      this.dragged = null;
    },
    onMove(event, item) {
      if (!this.dragged || !item) return;

      let currentIndex = this.items.indexOf(this.dragged);
      let newIndex = this.items.indexOf(item);

      // 如果鼠标移动到其他项上，则交换位置
      if (currentIndex !== newIndex && Math.abs(currentIndex - newIndex) === 1) {
          [this.items[currentIndex], this.items[newIndex]] = [this.items[newIndex], this.items[currentIndex]];
          event.preventDefault();
      }
    }
  }
});

这段代码实现了列表内项目的上下顺序调整效果。当用户点击并按住某个条目时会触发拖拽操作，在松开按钮之前可以通过改变鼠标的相对位移来进行重新排列。一旦释放按键即完成最终定位，并更新视图中的显示次序。