vue.draggable.next是一款Vue3支持拖放的插件，并且拖放完后会与数据自动同步
特点
- 基于 Sortable.js 封装
- 完全支持PC端和移动端
- 支持不同列表之间的拖放
- 没有 jQuery 依赖
- 列表变化和数据同步
- 兼容 Vue.js 3.0
- 支持取消动作
- 各种监听事件提供
安装
1
| npm i -S vuedraggable@next
|
使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // v-model是一个数组
// item就是数组的其中一项
// item-key唯一性，一般为子项其中的一个唯一属性
// @start开始拖动事件
// @end结束拖动事件
<draggable
v-model="myArray"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
|
1
2
3
4
5
6
7
8
9
10
| <draggable
element="div"
:list="list"
v-bind="{group:'title', animation:150}"
:no-transition-on-drag="true"
>
<transition-group type="transition" :css="true">
<p class="list" v-for="item in list" :key="item.id">{{item.name}}</p>
</transition-group>
</draggable>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
myArray:[
{
"id":1,
"name:"张三"
},
{
"id":2,
"name:"李四"
},
{
"id":3,
"name:"王五"
}
]
drag: false,
}
},
}
|
如果你想要动画效果的话，加上一个tag属性，值为transition-group，component-data为过渡的名字
1
2
3
4
5
6
7
8
9
10
| <draggable
v-model="myArray"
tag="transition-group"
:component-data="{ name: 'fade' }"
item-key="id"
>
<template #item="{ element }">
<div>{{ element.name }}</div>
</template>
</draggable>
|
| 属性名称 |
说明 |
| group |
如果一个页面有多个拖拽区域，通过设置group名称可以实现多个区域之间相互拖拽 ，同一名称的group之间可以互相拖拽，或者 { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] } |
| sort |
是否开启排序,如果设置为false,它所在组可拖动但是无法排序 |
| delay |
鼠标按下多少秒之后可以拖拽元素 |
| touchStartThreshold |
鼠标按下移动多少px才能拖动元素 |
| disabled |
:disabled= “true”,是否启用拖拽组件 |
| animation |
拖动时的动画效果，如设置animation=1000表示1秒过渡动画效果 |
| handle |
:handle=“.mover” 只有当鼠标在class为mover类的元素上才能触发拖到事件 |
| filter |
:filter=“.unmover” 设置了unmover样式的元素不允许拖动 |
| draggable |
:draggable=“.item” 样式类为item的元素才能被拖动 |
| ghost-class |
:ghost-class=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true |
| chosen-class |
:ghost-class=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true |
| drag-class |
:drag-class=”dragClass”拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true |
| force-fallback |
默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true |
| fallback-class |
默认false，克隆选中元素的样式到跟随鼠标的样式 |
| fallback-on-body |
默认false，克隆的元素添加到文档的body中 |
| fallback-tolerance |
按下鼠标移动多少个像素才能拖动元素，:fallback-tolerance=“8” |
| scroll |
默认true,有滚动区域是否允许拖拽 |
| scroll-fn |
滚动回调函数 |
| scroll-fensitivity |
距离滚动区域多远时，滚动滚动条 |
| scroll-speed |
滚动速度 |
| move |
当拖动元素经过另一个元素触发，可获取当前元素数据draggedContext.element，以及当前元素原来的位置futureIndex,和移动后的index，不返回或者返回true代表可拖动，返回false不可拖动，可以用来设置某个元素不可被拖动元素替换 |
| 属性名称 |
说明 |
| @move |
当拖动元素经过另一个元素触发 |
| @change |
元素位置改变后触发，可获取当前元素数据moved.element，以及当前元素原来的位置oldIndex,和移动后的newIndex |
| @start |
开始移动事件 |
| @end |
结束移动事件 |