vue3 + vite + ts 使用vuedraggable

Vue3 + Vite + TypeScript环境中使用`vuedraggable`，首先你需要安装这个插件。在终端或命令行里运行以下命令：

npm install vuedraggable @types/vuedraggable

或者如果使用Yarn：

yarn add vuedraggable types-vuedraggable

然后在你的项目中引入并配置`vuedraggable`。假设你在`main.ts`或`setup.ts`这样的文件中：

import draggable from 'vuedraggable';

// 在组件选项中使用
export default {
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3']); // 示例数据

    const handleDraggable = (ref: Ref<VueDraggableOptions>) => {
      ref.value.list = items; // 将items绑定到draggable实例
    };

    return { items, draggableInstance: draggable(handleDraggable) };
  },
};

在模板上，你可以像这样使用它：

<template>
  <div class="container">
    <draggable :list="draggableInstance.list" :options="{ group: 'group-key' }">
      <div v-for="(item, index) in draggableInstance.list" :key="index">{{ item }}</div>
    </draggable>
  </div>
</template>

这会创建一个可拖动的列表。记得替换`group-key`为你实际需要的分组键。