vuedraggable
文档/教程
安装
npm i vuedraggable -S
<!-- or -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
使用
<template>
<vuedraggable
:list="list"
animation="300"
class="box-draggable"
@choose="choose"
@end="dragEnd"
:forceFallback="true"
group="UI"
>
<div v-for="(element, i) in list" :key="i">element.name</div>
</vuedraggable>
</template>
<script>
import vuedraggable from "vuedraggable";
....
</script>
基本配置
tag
渲染为html标签，允许为第三方组件库标签(String)
list
数据结构(Array)，每次拖拽会返回一个新的修改后的list
sort
关闭/开启内部拖动排序(Boolean)
disabled
关闭/开启vuedraggable(Boolean)
animation
拖拽元素实时位移且添加位移动画(Number)；默认为0，即无实时位移动画；
注： 如果想添加的是非实时位移动画，即拖动结束后执行位移动画，为draggable组件内添加transition-group元素，设置transform属性的动画类；
@move
拖动内部元素，位置每改变时处理(Function)；e.draggedContext.futureIndex即当前拖动位置的顺序索引；
@start/end
拖拽开始/结束事件
@change
list数据结构改变事件，返回参数
{
"added"/"removed": { // 操作类型
element: { ... } // 操作元素
}
}
@choose
选中要拖拽元素时事件
@sort
拖拽排序完成时事件
高级配置
group
String：使用同一个名称标识多个draggable组件，相同group值的draggable可互相拖拽实现数据传递，相互增删；
Object：
{
name: "box-container", // group标识名称
pull: 'clone', // 配置pull(拉出)动作为拉出元素副本，默认为拉出元素本身
put: false, // 配置put(放置)动作，false即屏蔽该动作，不允许放置其他元素
}
注： pull/put支持Function类型值，控制返回值为“clone”或true，决定此次拖动是否克隆副本
clone
当前draggable组件的元素被pull拉出一份克隆元素时，对克隆元素的前置处理(Function)；允许自定义返回值实现自定义克隆副本，参数对象即默认克隆出的副本元素。
forceFallback
是否忽略(关闭)元素默认的HTML5拖拽行为，去除浏览器H5拖动行为的影响(Boolean)；
fallbackTolerance
强制鼠标拖动一定距离视为拖拽操作。部分设备拖拽与点击冲突时，设置固定px距离数值避免子元素无法点击情况；
scrollSensitivity
滚动边界值；当子项作为滚动内容时，拖拽子项至滚动边界值内自动滚动
样式类
ghostClass
拖拽排序时，占位元素的样式类
dragClass
拖动中样式类
fallbackClass
仅forceFallback设置为true有效，拖放中鼠标附着浮层的样式
嵌套实现
draggable嵌套实现本质是vuedraggable嵌套+数据嵌套
// 外部：一个自定义的嵌套组件
<nested-draggable :tasks="list" />
// 内部：draggable包裹元素+嵌套组件(实现嵌套draggable)
<draggable tag="ul" :list="tasks" :group="{ name: 'g1' }">
<li v-for="el in tasks" :key="el.name">
<p></p>
// 当拖拽导致el.tasks有嵌套数据时，渲染出嵌套的draggable组件
<nested-draggable :tasks="el.tasks" />
</li>
</draggable>
Vue3版本
安装
npm i vuedraggable@next -S
新特性
item 插槽替代遍历
<script>
import vuedraggable from 'vuedraggable';
<script>
<draggable>
<template #item="{element: item, index: i}">
<div> </div>
</template>
</draggable>
vite 下某些情况导致无法成功运行，尝试改写引入为：
import vuedraggable from 'vuedraggable/src/vuedraggable';
