如何禁用vue.draggable拖拽时排序，仅在释放后执行排序？

一、实现预期行为的方案 #

Vue.Draggable基于SortableJS，要禁用实时排序、仅在释放后执行排序，可通过以下两种方式实现：

1. 自定义拖拽反馈 + 手动更新数据 #

通过开启幽灵元素占位，关闭实时动画，在拖拽结束后手动调整数据列表：

<template>
  <draggable
    v-model="items"
    :options="{
      ghostClass: 'dragging-ghost',
      animation: 0,
      onStart: handleDragStart,
      onEnd: handleDragEnd
    }"
  >
    <div v-for="item in items" :key="item.id" class="item">{{ item.name }}</div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      draggedItem: null,
      originalIndex: null
    }
  },
  methods: {
    handleDragStart(evt) {
      this.draggedItem = evt.item
      this.originalIndex = evt.oldIndex
    },
    handleDragEnd(evt) {
      const newIndex = evt.newIndex
      if (this.originalIndex !== newIndex) {
        // 释放后手动调整数据顺序
        const [movedItem] = this.items.splice(this.originalIndex, 1)
        this.items.splice(newIndex, 0, movedItem)
      }
      this.draggedItem = null
      this.originalIndex = null
    }
  }
}
</script>

<style>
.dragging-ghost {
  opacity: 0.5;
  background: #eee;
}
.item {
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #ddd;
  cursor: move;
}
</style>

2. 阻止实时DOM移动 #

通过onMove事件直接阻止拖拽过程中的DOM位置调整，仅在结束后同步数据：

options: {
  onMove: (evt) => false, // 禁止拖拽时其他元素移动
  onEnd: handleDragEnd
}

这种方式下，拖拽过程中只有幽灵元素跟随鼠标，其他元素位置不变，释放后再通过handleDragEnd手动更新数据。

二、拖拽时视觉顺序改变但数据未变的原因 #

拖拽时视觉上的元素顺序变化，是SortableJS直接操作DOM实现的，和你的Vue数据列表无关：

• 拖拽开始时，Sortable会将拖拽元素从DOM流中临时移除，或通过CSS定位（如fixed）让它跟随鼠标
• 拖拽过程中，Sortable会实时调整其他DOM元素的位置，或通过占位元素模拟排序效果，营造“实时排序”的视觉感受
• 这个阶段你的Vue数据完全没有变化，只有当拖拽结束后，Sortable才会触发v-model的更新，将DOM的最终状态同步到数据列表中

内容的提问来源于stack exchange，提问作者Ivo Mitev