将一个列表项拖拽到另一个列表中

<template>
  <div>
    <h2>列表 1</h2>
    <ul style="min-height: 40px;border: 1px solid #ccc">
      <li
        v-for="(item, index) in list1"
        :key="item.id"
        :draggable="true"
        @dragstart="handleDragStart($event, item, index, 'list1')"
      >
        {{ item.text }}
      </li>
    </ul>
    <h2>列表 2</h2>
    <ul @dragover.prevent @drop="handleDrop" style="min-height: 40px;border: 1px solid #ccc">
      <li v-for="item in list2" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        { id: 1, text: "item 1" },
        { id: 2, text: "item 2" },
        { id: 3, text: "item 3" },
        { id: 4, text: "item 4" },
        { id: 5, text: "item 5" }
      ],
      list2: [],
    };
  },
  methods: {
    handleDragStart(e, item, index, listName) {
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.setData("text", JSON.stringify(item));
      e.dataTransfer.setData("index", index);
      e.dataTransfer.setData("listName", listName);
    }
    handleDrop(e) {
      const item = JSON.parse(e.dataTransfer.getData("text"));
      const index = e.dataTransfer.getData("index");
      const listName = e.dataTransfer.getData("listName");
      const list = this[listName];
      list.splice(index, 1);
      this.list2.push(item);
    }
  }
};
</script>

e.dataTransfer是一个拖拽事件对象的属性，它是用来在拖拽源对象和拖拽目标对象之间传递数据的。
当拖动元素时，e.dataTransfer是一个数据存储对象，它可以存储任何类型的数据，例如文本、URL、HTML或JavaScript对象。它有三个方法，分别是：
setData(format, data)：设置拖动数据的类型和值。
getData(format)：获取拖动数据的值。
clearData(format)：清除指定格式的所有拖动数据。

在Vue中使用e.dataTransfer对象实现拖拽操作时，可以在拖拽开始时使用setData()方法设置要拖拽的数据类型和值，然后在拖拽结束时使用getData()方法获取拖拽的数据。