Vuedraggable如何实现两个可拖拽容器的元素位置互换

您好，我在使用Vuedraggable时遇到了问题：当我将「item 2」拖拽到「item 3」的位置时，希望两个元素能够互换位置，恳请各位帮忙提供解决方案。

Vuedraggable默认采用插入式排序逻辑，拖拽元素到目标位置后其他元素会顺移，要实现两个元素直接互换，需要关闭组件默认排序，手动在拖拽事件中处理数组元素交换。

完整实现代码 #

<template>
  <draggable
    v-model="list"
    :sort="false"
    @start="handleDragStart"
    @end="handleDragEnd"
    item-key="id"
  >
    <template #item="{ element }">
      <div class="drag-item">{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
        { id: 4, name: 'item 4' }
      ],
      dragStartIndex: null
    }
  },
  methods: {
    handleDragStart(e) {
      // 记录拖拽起始元素下标
      this.dragStartIndex = e.oldIndex
    },
    handleDragEnd(e) {
      const startIdx = this.dragStartIndex
      const endIdx = e.newIndex
      // 位置无变化直接终止逻辑
      if (startIdx === endIdx || startIdx === null || endIdx === null) {
        this.dragStartIndex = null
        return
      }
      // 交换两个位置的数组元素
      ;[this.list[startIdx], this.list[endIdx]] = [this.list[endIdx], this.list[startIdx]]
      this.dragStartIndex = null
    }
  }
}
</script>

注意事项 #

• :sort="false"是核心配置，必须关闭组件默认的排序逻辑，否则会出现元素位置错乱
• item-key必须绑定唯一值，避免Vue节点复用导致的渲染异常
• Vue3版本仅需调整为对应Composition API写法即可，核心交换逻辑无需修改

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