列表拖拽修改顺序

<template>
  <div class="drag-sort-container">
    <h2>拖拽排序示例</h2>
    <ul id="sortable-list">
      <li 
        v-for="item in items" 
        :key="item.id" 
        :data-id="item.id"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragover="handleDragOver($event)"
        @dragleave="handleDragLeave($event, item)"
        @drop="handleDrop($event, item)"
        @dragend="handleDragEnd($event)"
        :class="{ 'dragging': draggingItem === item, 'over': overItem === item }"
      >
        {{ item.name }}
      </li>
    </ul>
    <button @click="saveOrder">保存顺序</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目 1' },
        { id: 2, name: '项目 2' },
        { id: 3, name: '项目 3' },
        { id: 4, name: '项目 4' },
        { id: 5, name: '项目 5' }
      ],
      draggingItem: null,
      overItem: null
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.draggingItem = item;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/plain', item.id);
    },
    handleDragOver(e) {
      e.preventDefault(); // 必须阻止默认行为才能触发drop事件
      e.dataTransfer.dropEffect = 'move';
      return false;
    },
    handleDragEnter(e, item) {
      e.preventDefault();
      if (this.draggingItem !== item) {
        this.overItem = item;
      }
    },
    handleDragLeave(e, item) {
      if (this.overItem === item) {
        this.overItem = null;
      }
    },
    handleDrop(e, item) {
      e.stopPropagation();
      e.preventDefault();
      
      if (this.draggingItem !== item) {
        // 找到当前拖拽项和目标项的索引
        const srcIndex = this.items.indexOf(this.draggingItem);
        const targetIndex = this.items.indexOf(item);
        
        // 创建新数组，避免直接修改原数组
        const newItems = [...this.items];
        // 移除拖拽项
        const [removedItem] = newItems.splice(srcIndex, 1);
        // 插入拖拽项到目标位置
        newItems.splice(targetIndex, 0, removedItem);
        
        // 更新数据
        this.items = newItems;
      }
      
      this.overItem = null;
      return false;
    },
    handleDragEnd() {
      this.draggingItem = null;
      this.overItem = null;
    },
    saveOrder() {
      // 获取当前排序的ID数组
      const order = this.items.map(item => item.id);
      console.log('新的顺序：', order);
      
      // 这里可以添加实际的保存逻辑，比如调用API
      // this.$http.post('/save-order', { order })
      //   .then(response => {
      //     console.log('保存成功', response.data);
      //   })
      //   .catch(error => {
      //     console.error('保存失败', error);
      //   });
    }
  }
};
</script>

<style scoped>
.drag-sort-container {
  font-family: sans-serif;
  padding: 20px;
}

#sortable-list {
  list-style: none;
  padding: 0;
  width: 300px;
  margin: 0 auto;
}

#sortable-list li {
  padding: 10px 15px;
  margin-bottom: 8px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
  user-select: none;
}

/* 拖拽时样式 */
.dragging {
  opacity: 0.5;
}

.over {
  border-top: 2px solid #007bff;
}
</style>