vue-draggable-plus

https://vuejsexamples.com/tag/drag/

https://vuejsexamples.com/vue-draggable-plus-the-universal-drag-and-drop-solution-for-vue/

https://vuejsexamples.com/a-vue-component-for-making-elements-draggable/

https://github.com/Alfred-Skyblue/vue-draggable-plus

https://stackblitz.com/edit/github-b2xatc-qe8qxj?file=src%2FApp.vue

https://gitee.com/flfdnvfhp/vue-draggable-plus?_from=gitee_search

文档

https://alfred-skyblue.gitee.io/vue-draggable-plus/guide/

vue2

https://article.juejin.cn/post/7226385225580134455

https://gitee.com/zeng-yilei/vuedraggable?_from=gitee_search

https://blog.csdn.net/weixin_58099903/article/details/125655355

1、第一步 ，安装 vue.draggable 插件，yarn 或者 npm 都可以
npm install vuedraggable --save # vue2
npm install vuedraggable@next --save # vue3


"vuedraggable": "^2.43.3"
2、第二步 ，使用插件
import draggable from 'vuedraggable'

3、注册组件

components: { draggable }

{
    group: "name",  // 可以简单理解为只要group相同，就可以互相拖拽
    sort: true,  // 在列表内排序   
    delay: 0, // 定义排序应开始的时间(以毫秒为单位)  
    delayOnTouchOnly: false, // 只在用户使用触摸时延迟  
    touchStartThreshold: 0, // px,在取消延迟的拖动事件之前,点应移动的像素数   
    disabled: false,  // 如果设置为true,则禁用sortable。  
    store: null,  // @see Store   
    animation: 150,  // ms,移动项目时的动画速度排序,`0` - 无动画   
    easing: "cubic-bezier(1, 0, 0, 1)", // 动画缓动。默认为null。请参阅  示例。  
    handle: ".my-handle",  // 列表项内的拖动句柄选择器   
    filter: ".ignore-elements",  // 不导致拖动的选择器(字符串或函数)   
    preventOnFilter: true, // 触发时调用`filter` `event.preventDefault()`  
    draggable: ".item",  // 指定元素内哪些项目应可拖动    dataIdAttr: 'data-id', // `toArray()` 方法使用的HTML属性    ghostClass: "sortable-ghost",  // 拖放占位符的类名   
    chosenClass: "sortable-chosen",  // 选定项目的类名   
    dragClass: "sortable-drag",  // 拖动项目的类名     swapThreshold: 1, // 交换区域的阈值   
    invertSwap: false, // 如果设置为true,则始终使用反转的交换区域   
    invertedSwapThreshold: 1, // 反转的交换区域的阈值(默认情况下将设置为swapThreshold值)   
    direction: 'horizontal', // Sortable的方向(如果未给定,则会自动检测)     forceFallback: false,  // 忽略HTML5 DnD行为,强制回退   
    fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名   
    fallbackOnBody: false,  // 将克隆的DOM元素附加到文档正文   
    fallbackTolerance: 0, // 指定鼠标应移动的像素数,才被视为拖动。     dragoverBubble: false,   
    removeCloneOnHide: true, // 隐藏时删除克隆元素,而不仅仅是隐藏它   
    emptyInsertThreshold: 5, // px,鼠标离空sortable的距离,以将拖动元素插入其中
}