vue 拖拽排序 实现

实现拖拽排序的基本思路

在Vue中实现拖拽排序通常需要借助HTML5的拖放API或第三方库如sortablejs、vuedraggable等。以下是两种常见实现方式：

使用HTML5原生拖放API

通过HTML5的draggable属性结合dragstart、dragover、drop等事件实现基础拖拽排序。

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragover.prevent="handleDragOver(index)"
      @drop="handleDrop(index)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDragOver(index) {
      if (this.draggedIndex !== index) {
        const draggedItem = this.list[this.draggedIndex]
        this.list.splice(this.draggedIndex, 1)
        this.list.splice(index, 0, draggedItem)
        this.draggedIndex = index
      }
    },
    handleDrop() {
      this.draggedIndex = null
    }
  }
}
</script>

使用vuedraggable库

vuedraggable是基于sortablejs的Vue组件，提供更完善的拖拽功能。

安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable 
    v-model="list" 
    @end="onDragEnd"
    item-key="id"
  >
    <template #item="{ element }">
      <div>{{ 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' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('排序后的列表:', this.list)
    }
  }
}
</script>

实现表格行拖拽排序

对于表格行的拖拽排序，vuedraggable同样适用：

<template>
  <draggable 
    v-model="tableData" 
    tag="tbody"
    item-key="id"
  >
    <template #item="{ element }">
      <tr>
        <td>{{ element.id }}</td>
        <td>{{ element.name }}</td>
      </tr>
    </template>
  </draggable>
</template>

跨组件拖拽实现

通过Vue的provide/inject或全局状态管理实现跨组件拖拽：

// 父组件
provide() {
  return {
    dragContext: {
      list: this.list,
      updateList: this.updateList
    }
  }
}

// 子组件
inject: ['dragContext']

性能优化建议

对于大数据量列表，使用虚拟滚动技术（如vue-virtual-scroller）结合拖拽功能。限制重渲染范围，避免不必要的计算属性。

移动端适配

移动端需要添加touch事件支持。vuedraggable已内置移动端支持，原生实现需添加touchstart、touchmove等事件处理。

handleTouchStart(e, index) {
  this.draggedIndex = index
  this.touchStartY = e.touches[0].clientY
}

以上方法可根据具体需求选择实现，第三方库方案通常更完整但会增加包体积，原生API更适合简单场景。