vue draggable 是一款基于vuejs3.x的拖拽组件。该组件允许用户进行拖放操作，并将结果同步到视图模型数组中。
vue draggable基于Sortable.js并提供它的所有功能。
vue draggable组件完全支持Sortable.js的所有功能，包括以下特性：
- 支持触摸设备
- 支持拖动手柄和可选择文本
- 智能自动滚动
- 支持在不同列表之间拖放
- 不依赖于jQuery
此外，该组件还具有以下功能：
- 保持HTML和视图模型列表同步
- 兼容Vue.js 3.0 transition-group
- 支持取消拖放操作
- 在需要完全控制时报告任何更改的事件
- 可以重用现有的UI库组件（例如vuetify、element或vue material等），并使用tag和componentData属性使它们可拖动。
版本说明：
本文档介绍的是vue.draggable.next，支持vue3.x。
如果要在vue2.x中使用，请查看Vue.Draggable
使用方法
安装
如果您想使用vue draggable拖拽组件，首先您需要安装它，命令如下：
yarn add vuedraggable@next // 或者 npm i -S vuedraggable@next
使用
基本使用
<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
data() {
return {
drag: false,
}
},
...
和 transition-group 一起使用
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div> {{element.name}} </div>
</template>
<template #header>
<button @click="addPeople">Add</button>
</template>
</draggable>
结合vuex使用
<draggable v-model='myList'>
computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
配置参数
Vue Draggable 拖拽组件的可用配置参数如下：
- modelValue： 该属性的类型为Array，不是必需的，并且默认为null。它是可拖动组件的输入数组，通常与内部元素的v-for指令引用的数组相同。这是使用Vue.draggable的首选方法，因为它与Vuex兼容。它不应直接使用，而只能通过v-model指令使用。
- list：该属性的类型为Array，不是必需的，并且默认为null。它是一个备选项，用于与拖放同步的数组。主要区别在于，list属性由可拖动组件使用splice方法更新，而modelValue是不可变的。不要与modelValue属性一起使用。
- itemKey：该属性的类型可以是字符串或函数，是必需的。它用作元素键的属性。或者，它可以是一个接收列表元素并返回其键的函数。
- group：指定可排序列表所属的组，可以用一个字符串或一个对象来表示。
- sort：是否在列表内部对项目进行排序。
- delay：在开始排序之前等待的时间（以毫秒为单位）。
- touchStartThreshold：在开始拖动之前，指针必须移动的最小距离（以像素为单位）。
- disabled：是否禁用可排序列表。
- store：用于存储排序后列表项状态的对象。
- animation：拖动项目时的动画速度（以毫秒为单位）。
- easing：动画缓动函数，可以是一个字符串或一个函数。
- handle：指定拖动手柄的选择器。
- filter：指定不应该触发拖动的元素选择器。
- preventOnFilter：当元素被过滤时是否调用 event.preventDefault()。
- draggable：指定哪些元素应该是可拖动的。
- ghostClass、chosenClass、dragClass：分别是占位符、选中项和正在拖动项的 CSS 类名。
- swapThreshold、invertSwap、invertedSwapThreshold：控制交换区域的大小和方向。
- direction：指定列表的方向，可以是 'horizontal' 或 'vertical'。
- forceFallback、fallbackClass、fallbackOnBody、fallbackTolerance：控制在不支持 HTML5 拖放 API 的浏览器中使用回退方案。
- dragoverBubble：控制是否允许拖动事件冒泡到父元素。
- removeCloneOnHide：控制当克隆元素不显示时是否删除它。
- emptyInsertThreshold：指定鼠标距离空列表的最小距离，以便将拖动元素插入其中。
- tag：该属性的类型为字符串，默认为'div'。它是可拖动组件为包含的插槽创建的外部元素的HTML节点类型。也可以将vue组件的名称作为元素传递。在这种情况下，draggable属性将传递给创建组件。如果需要设置创建的组件的props或事件，请参见componentData。
- clone：该属性的类型为函数，不是必需的，默认为
(original) => { return original;}。当clone选项为true时，在源组件上调用该函数以克隆元素。唯一的参数是要克隆的viewModel元素，返回值是它的克隆版本。默认情况下，vue.draggable重用viewModel元素，因此如果要克隆或深度克隆它，您必须使用此钩子。 -
move：该属性的类型为函数，不是必需的，默认为null。如果不为null，则会以类似于Sortable onMove回调的方式调用此函数。返回false将取消拖动操作。
function onMoveCallback(evt, originalEvent){ ... // return false; — for cancel }evt对象具有与Sortable onMove事件相同的属性，以及3个附加属性：
- draggedContext：与拖动元素相关联的上下文
- index：拖动元素的索引
- element：拖动元素的底层viewModel元素
- futureIndex：如果接受放置操作，则拖动元素的潜在索引
- relatedContext：与当前拖动操作相关联的上下文
- index：目标元素的索引
- element：目标元素的viewModel元素
- list：目标列表
- component：目标VueComponent
如果需要取消拖动操作，可以返回false。例如：
<draggable :list="list" :move="checkMove"> checkMove: function(evt){ return (evt.draggedContext.element.name!=='apple'); } - componentData：该属性的类型为对象，不是必需的，默认为null。此属性用于将附加信息传递给由标签属性声明的子组件。
componentData属性的值是一个对象，对应于我们将传递给组件的属性、props和事件。
下面是和element UI 一起使用的例子:
<draggable tag="el-collapse" :list="list" :component-data="getComponentData()" item-key="name">
<template #item="{element}">
<el-collapse-item :title="element.title" :name="element.name">
<div>{{element.description}}</div>
</el-collapse-item>
</template>
</draggable>
methods: {
handleChange() {
console.log('changed');
},
inputChanged(value) {
this.activeNames = value;
},
getComponentData() {
return {
onChange: this.handleChange,
onInput: this.inputChanged,
wrap: true,
value: this.activeNames
};
}
}
