vue-draggable-plus 实现悬浮拖拽

Vue draggable plus是一个基于Vue.js的第三方插件，它增强了Vue组件之间的拖拽功能，特别适用于需要实现复杂拖放操作的场景，如列表排序、元素定位等。它的核心是利用HTML5的drag and drop API，并提供了额外的增强特性，比如支持设置拖拽选项（如动画效果、方向限制）、提供事件处理器以及处理拖拽结束后的回调。

使用Vue draggable plus，你可以通过以下步骤来实现悬浮拖拽：

1. 安装插件：首先在你的项目中安装`vue.draggable-plus`，可以使用npm或yarn：

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

2. 引入并配置：在main.js或组件内的script标签里引入并注册组件，同时配置dragable选项：

   import draggable from 'vue.draggable-plus'
   
   Vue.component('draggable-item', draggable({
     group: 'items',
     drag: {
       delayOnTouchmove: true,
       // 其他悬浮相关选项，如 cursor-at: 'bottom center'
     },
     ghostClass: 'ghost-item',
     end: function(event, ui) {
       console.log('拖动结束:', event, ui)
     }
   }))

3. 在模板中使用`<draggable>`标签包裹可拖拽的元素：

   <draggable-item v-model="items" :list="itemsToDrag">
     <!-- 每个拖拽项的内容 -->
     <div v-for="(item, index) in items" :key="index">{{ item.name }}</div>
   </draggable-item>

4. 数据绑定和驱动拖拽状态：
- `v-model`用于双向数据绑定，控制哪些元素可以被拖拽。
- `list`属性指向可拖动元素的数组，用于指定组内允许拖动的元素集合。