vue-draggable-plus怎么实现拖拽效果 咋用 vue3示例代码

Vue-Draggable-Plus是一个基于Vue.js的轻量级拖放库，它扩展了原生的`vuedraggable`组件，并添加了许多额外的功能和增强。要实现在Vue3中使用`vue-draggable-plus`的拖拽效果，首先需要安装它：

npm install vue-draggable-plus
# 或者
yarn add vue-draggable-plus

然后在你的组件中引入并使用它，例如：

<template>
  <div id="draggable-container">
    <draggable v-model="items" :options="{group: 'groupKey'}">
      <div class="item" v-for="(item, index) in items" :key="index" @start="dragStart(item)" @end="dragEnd(item)">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script setup>
import draggable from 'vue-draggable-plus'
import { ref } from 'vue'

const items = ref([{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }])
const groupKey = Symbol('groupKey') // 创建一个唯一标识符

function dragStart(item) {
  console.log(`Item ${item.name} is being dragged`)
}

function dragEnd(item) {
  console.log(`Item ${item.name} has been dropped`)
}
</script>

<style scoped>
.item {
  width: 100px;
  height: 50px;
  background-color: #f00;
  margin: 10px;
  cursor: move;
}
</style>

在这个例子中，`v-model`绑定到数组`items`，每个项目都是可以拖动的。`options`属性配置了一些基本选项，如分组(`group`)，开始拖动(`start`)和结束拖动(`end`)事件处理函数。

注意，`@start` 和 `@end` 是 Vue 自定义事件，在这里用于捕获拖动的开始和结束。你可以根据需求修改这些回调函数的行为。