vue拖拽实现列表排序

实现拖拽排序的基本思路

在Vue中实现列表拖拽排序通常借助HTML5的拖拽API或第三方库如vuedraggable。核心原理是通过监听拖拽事件（dragstart/dragend/dragover等）或利用现成库的封装能力，动态更新数据顺序。

使用HTML5原生拖拽API

1. 设置元素为可拖拽
   给列表项添加draggable="true"属性，并绑定相关事件：

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

2. 事件处理逻辑

   data() {
     return {
       draggedIndex: null,
       list: [
         { id: 1, text: 'Item 1' },
         { id: 2, text: 'Item 2' }
       ]
     }
   },
   methods: {
     handleDragStart(index) {
       this.draggedIndex = index;
     },
     handleDragOver(index) {
       if (this.draggedIndex !== null && 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;
     }
   }

使用vuedraggable库（推荐）

1. 安装依赖

   npm install vuedraggable

2. 组件实现

   <template>
     <draggable 
       v-model="list" 
       @end="onDragEnd"
       item-key="id"
     >
       <template #item="{ element }">
         <div class="item">{{ element.text }}</div>
       </template>
     </draggable>
   </template>
   
   <script>
   import draggable from 'vuedraggable';
   export default {
     components: { draggable },
     data() {
       return {
         list: [
           { id: 1, text: 'Item 1' },
           { id: 2, text: 'Item 2' }
         ]
       }
     },
     methods: {
       onDragEnd() {
         console.log('排序后的列表:', this.list);
       }
     }
   }
   </script>

动画优化

添加过渡动画提升用户体验：

/* 拖拽过程中的样式 */
.flip-list-move {
  transition: transform 0.3s;
}
.draggable-item {
  touch-action: none; /* 防止移动端触摸冲突 */
}

跨组件拖拽

若需跨不同Vue组件拖拽，可通过Vuex或事件总线共享状态：

// 在Vuex中定义共享数据
state: {
  draggableItems: []
},
mutations: {
  updateItems(state, payload) {
    state.draggableItems = payload;
  }
}

移动端适配

对于移动端，推荐使用支持触摸事件的库如sortablejs：

import Sortable from 'sortablejs';
mounted() {
  new Sortable(this.$el, {
    animation: 150,
    onEnd: (evt) => {
      // 处理排序逻辑
    }
  });
}