请使用vue3创建一个可拖拽列表组件

以下是使用Vue3创建可拖拽列表组件的示例代码：

<template>
  <div class="drag-list">
    <div
      class="drag-item"
      v-for="(item, index) in items"
      :key="item.id"
      :draggable="true"
      @dragstart="dragStart(index)"
      @dragover="dragOver(index)"
      @drop="drop(index)"
      @dragend="dragEnd"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  name: 'DragList',
  setup() {
    const state = reactive({
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
      ],
      draggedItemIndex: null,
    });

    const dragStart = (index) => {
      state.draggedItemIndex = index;
    };

    const dragOver = (index) => {
      const draggedItem = state.items[state.draggedItemIndex];
      const targetItem = state.items[index];

      if (draggedItem.id !== targetItem.id) {
        const items = [...state.items];
        items.splice(state.draggedItemIndex, 1);
        items.splice(index, 0, draggedItem);
        state.items = items;
        state.draggedItemIndex = index;
      }
    };

    const drop = () => {
      // do nothing
    };

    const dragEnd = () => {
      state.draggedItemIndex = null;
    };

    return {
      ...toRefs(state),
      dragStart,
      dragOver,
      drop,
      dragEnd,
    };
  },
};
</script>

<style scoped>
.drag-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drag-item {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: move;
}
</style>

该组件使用响应式对象`state`来存储列表项和拖拽过程中的状态。列表项可以通过`v-for`指令动态渲染，每个列表项都设置为可拖拽，并绑定了相关的拖拽事件。在拖拽开始时，记录被拖拽的列表项的索引。在拖拽过程中，根据当前鼠标指针所在的位置动态改变列表项的顺序。在拖拽结束时，清空被拖拽的列表项的索引。最后，将`state`对象中的属性通过`toRefs`函数转换为响应式引用，以便在模板中使用。