Vue.Draggable
v2.24.3
Vue 组件 (Vue.js 2.0) 或指令 (Vue.js 1.0) 允许拖放以及与视图模型数组同步。
基于并提供 Sortable.js 的所有功能
参见 vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag和componentData属性使它们可拖动寻找支持者！
觉得这个项目有用吗？你可以给我买一个☕或一个？
yarn add vuedraggable
npm i -S vuedraggable请注意，Vue 2.0 是 vuedraggable，而不是 1.0 版本的 vue-draggable
< script src =" //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js " > script >
< script src =" //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js " > script >
< script src =" //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js " > script >参见示例部分
使用可拖动组件：
< draggable v-model =" myArray " group =" people " @start =" drag=true " @end =" drag=false " >
< div v-for =" element in myArray " :key =" element.id " > {{element.name}} div >
draggable >.vue 文件：
import draggable from 'vuedraggable'
. . .
export default {
components : {
draggable ,
} ,
...transition-group ： < draggable v-model =" myArray " >
< transition-group >
< div v-for =" element in myArray " :key =" element.id " >
{{element.name}}
div >
transition-group >
draggable >可拖动组件应直接包装可拖动元素，或包含可拖动元素的transition-component 。
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" footer " @click =" addPeople " > Add button >
draggable > < draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" header " @click =" addPeople " > Add button >
draggable > < draggable v-model =' myList ' > computed: {
myList : {
get ( ) {
return this . $store . state . myList
} ,
set ( value ) {
this . $store . commit ( 'updateList' , value )
}
}
}类型： Array
必填： false
默认值： null
将数组输入到可拖动组件。通常与内部元素 v-for 指令引用的数组相同。
这是使用 Vue.draggable 的首选方式，因为它与 Vuex 兼容。
它不应该直接使用，而只能通过v-model指令使用：
< draggable v-model =" myArray " > 类型： Array
必填： false
默认值： null
list 是value属性的替代方案，是一个与拖放同步的数组。
主要区别在于list prop 是由可拖动组件使用 splice 方法更新的，而value是不可变的。
不要与 value 属性结合使用。
2.19版本新增
从 2.19 版本开始，可排序选项可以直接设置为 vue.draggable 属性。
这意味着所有可排序选项都是有效的可排序属性，但所有以“on”开头的方法都有一个值得注意的例外，因为可拖动组件通过事件公开相同的 API。
支持 kebab-case 属性：例如， ghost-class属性将转换为ghostClass可排序选项。
设置句柄、可排序和组选项示例：
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > 类型： String
默认值： 'div'
可拖动组件创建为所包含插槽的外部元素的元素的 HTML 节点类型。
也可以将 vue 组件的名称作为元素传递。在这种情况下，draggable 属性将被传递给创建组件。
如果您需要为创建的组件设置 props 或 event，另请参阅 componentData。
类型： Function
必填： false
默认值：（ (original) => { return original;}
当克隆选项为 true 时，调用源组件的函数来克隆元素。唯一参数是要克隆的 viewModel 元素，返回值是其克隆版本。
默认情况下，vue.draggable 重用 viewModel 元素，因此如果您想克隆或深度克隆它，则必须使用此钩子。
类型： Function
必填： false
默认值： null
如果不为 null，则将以与 Sortable onMove 回调类似的方式调用此函数。返回 false 将取消拖动操作。
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}evt 对象具有与 Sortable onMove 事件相同的属性，以及 3 个附加属性：
draggedContext ：链接到拖动元素的上下文index : 拖拽元素索引element : 视图模型元素下的拖动元素futureIndex ：如果接受放置操作，则拖动元素的潜在索引relatedContext ：链接到当前拖动操作的上下文index : 目标元素索引element : 目标元素视图模型元素list ：目标列表component ：目标VueComponentHTML：
< draggable :list =" list " :move =" checkMove " >javascript:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}查看完整示例：Cancel.html、cancel.js
类型： Object
必填： false
默认值： null
此道具用于将附加信息传递给标记道具声明的子组件。
价值：
props ：要传递给子组件的道具attrs ：要传递给子组件的 attrson : 子组件中要订阅的事件示例（使用元素 UI 库）：
< draggable tag =" el-collapse " :list =" list " :component-data =" getComponentData() " >
< el-collapse-item v-for =" e in list " :title =" e.title " :name =" e.name " :key =" e.name " >
< div > {{e.description}} div >
el-collapse-item >
draggable > methods: {
handleChange ( ) {
console . log ( 'changed' ) ;
} ,
inputChanged ( value ) {
this . activeNames = value ;
} ,
getComponentData ( ) {
return {
on : {
change : this . handleChange ,
input : this . inputChanged
} ,
attrs : {
wrap : true
} ,
props : {
value : this . activeNames
}
} ;
}
}支持可排序事件：
start 、 add 、 remove 、 update 、 end 、 choose 、 unchoose 、 sort 、 filter 、 clone
每当 Sortable.js 使用相同参数触发 onStart、onAdd、onRemove、onUpdate、onEnd、onChoose、onUnchoose、onSort、onClone 时，都会调用事件。
请参阅此处以供参考
请注意，SortableJS OnMove 回调与 move 属性映射
HTML：
< draggable :list =" list " @end =" onEnd " >改变事件
当 list prop 不为 null 并且相应的数组由于拖放操作而改变时，会触发change事件。
使用包含以下属性之一的参数调用此事件：
added ：包含添加到数组的元素的信息newIndex : 添加元素的索引element : 添加的元素removed ：包含从数组中删除的元素的信息oldIndex ：删除之前元素的索引element : 被移除的元素moved ：包含在数组中移动的元素的信息newIndex : 移动元素的当前索引oldIndex ：移动元素的旧索引element : 移动的元素限制：页眉或页脚插槽均不能与过渡组一起使用。
使用header槽在 vuedraggable 组件内添加不可拖动的元素。重要提示：它应该与可拖动选项结合使用来标记可拖动元素。请注意，标题槽将始终添加在默认槽之前，无论其在模板中的位置如何。前任：
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" header " @click =" addPeople " > Add button >
draggable > 使用footer槽在 vuedraggable 组件内添加不可拖动的元素。重要提示：它应该与可拖动选项结合使用来标记可拖动元素。请注意，无论页脚位置在模板中的位置如何，页脚位置始终会添加到默认位置之后。前任：
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" footer " @click =" addPeople " > Add button >
draggable >Vue.draggable 子项应始终使用 v-for 指令映射列表或 value 属性
v-for 中的子元素应与 Vue.js 中的任何元素一样设置键控。请特别注意提供相关的键值：
可拖动示例
看这里
