HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。

<template>
  <div class="drag-container">
    <div
      v-for="(item, index) in list"
      :key="item.id"
      class="drag-item"
      :draggable="true"
      @dragstart="handleDragStart($event, item)"
      @dragover.prevent="handleDragOver($event)"
      @drop="handleDrop($event, item, index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...更多项目
      ],
      draggedItem: null, // 正在拖动的项
      draggedIndex: null, // 正在拖动的项的初始索引
    };
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      // 设置要传递的数据
      event.dataTransfer.setData('text', item.id);
    },
    handleDragOver(event) {
      // 这是必要的，否则drop事件不会触发
      event.preventDefault();
    },
    handleDrop(event, item, index) {
      const draggedItemId = event.dataTransfer.getData('text');
      const draggedItem = this.list.find(i => i.id === parseInt(draggedItemId));
      this.draggedIndex = this.list.indexOf(item);
      // 移除原位置的元素
      this.list.splice(this.draggedIndex, 1);
      // 在新位置插入元素
      this.list.splice(index, 0, draggedItem);
    }
  }
};
</script>
 
<style scoped>
.drag-container {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #f9f9f9;
}
.drag-item {
  user-select: none;
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>

这个简单的Vue组件展示了如何使用HTML5拖放API来实现一个列表的排序功能。用户可以点击并拖动列表中的项来重新排列它们。代码中包含了拖动开始、拖动过程中的事件处理以及放置的逻辑，并且使用了Vue的响应式数据绑定来更新列表的顺序。