vue拖拽给列表重新排序

在 Vue.js 中实现列表重新排序的拖拽功能，可以使用 `v-for` 指令结合自定义指令 `v-draggable` 来实现。

首先，需要为每个列表项添加一个自定义指令 `v-draggable`，该指令绑定一个值为 `true` 的布尔属性，表示该元素可以被拖拽。在该指令中，需要监听 `mousedown`、`mousemove` 和 `mouseup` 事件，以实现拖拽功能。具体可以参考以下代码：

<div v-for="(item, index) in list" v-draggable="true" @dragstart="handleDragStart(index)" @dragover="handleDragOver(index)" @dragend="handleDragEnd(index)">
  <!-- 列表项的内容 -->
</div>

其中，`handleDragStart` 方法会在拖拽开始时被调用，该方法会将当前拖拽的元素的索引保存在组件的状态中；`handleDragOver` 方法会在拖拽时被调用，该方法会根据鼠标所在位置计算出当前元素应该被插入的位置，并更新组件的状态；`handleDragEnd` 方法会在拖拽结束时被调用，该方法会将保存在组件状态中的索引清空。

接下来，可以在模板中使用 `v-for` 指令对列表进行渲染，同时根据组件的状态来动态更新列表项的位置。具体可以参考以下代码：

<div v-for="(item, index) in list" :style="{ transform: `translateY(${translateY[index]}px)` }">
  <!-- 列表项的内容 -->
</div>

其中，`translateY` 数组保存了每个列表项应该被移动的距离，根据该数组来动态更新列表项的位置。

最后，还需要在自定义指令中设置 `draggable` 属性为 `false`，以防止浏览器默认的拖拽行为。具体可以参考以下代码：

Vue.directive('draggable', {
  bind(el, binding) {
    el.setAttribute('draggable', binding.value)

    el.addEventListener('mousedown', (e) => {
      // 拖拽开始
      // ...
    })

    el.addEventListener('mousemove', (e) => {
      // 拖拽中
      // ...
    })

    el.addEventListener('mouseup', (e) => {
      // 拖拽结束
      // ...
    })
  },

  update(el, binding) {
    el.setAttribute('draggable', binding.value)
  }
})

这样，就可以实现列表重新排序的拖拽功能了。完整代码可以参考以下链接：https://codesandbox.io/s/vue-draggable-list-px5q2