vue2使用vue-draggable-plus

Vue2中，`vue-draggable-plus`是一个增强版的拖拽组件库，它基于`vuedraggable`构建而来，提供了更丰富的功能和易用性。这个库允许你在Vue应用中创建可拖动、排序的元素，例如列表项、卡片等，支持手势操作和自定义回调。

要在Vue2项目中使用`vue-draggable-plus`，你需要按照以下步骤：

1. **安装**：首先通过npm或yarn添加依赖：

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

2. **导入并注册**：在你的组件文件中引入组件，并在`components`选项中注册它：

   import draggable from 'vue2-draggable-plus';

   export default {
     components: {
       draggable,
     },
     //...
   }

3. **在模板中使用**：在需要拖动效果的地方，将普通的HTML元素包裹在`draggable`组件内，并可以配置各种属性如拖动方向、禁用、动画等：

   <draggable :items="items" @start="dragStart" @end="dragEnd">
     <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
   </draggable>

4. **处理事件**：`@start` 和 `@end`（或其他提供的事件）是用来处理拖动开始和结束时的逻辑，比如更新数据模型或触发其他业务逻辑。