vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆（网上资源整理的文档）
效果图：
--------------------------------------------------------------------------------
首先需要安装vuedraggable依赖包：
npm install vuedraggable --save
因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下
npm install sortablejs --save
复制vue html代码到项目：
<template> <div> <div> <h3>常用</h3> <draggable :list="list1" :options="{group:'article', disabled: disabled}" @start="start22" @end="end22"> <div v-for="(element, index) in list1" :key="element.id"> <div>{{element.name}}</div> <div> <i @click="handleDel(index, element.id)"></i> </div> </div> </draggable> </div> <div></div> <div> <h3>所有</h3> <draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}" @end="end"> <div v-for="element in list2" :key="element.id" :class="{undraggable : element.flag}"> <div> {{element.name}}</div> </div> </draggable> </div> </div> </template>
下面是vue js代码（包含css样式）：
<script> import draggable from 'vuedraggable' export default { name: 'DndList', components: { draggable }, watch: { }, data () { return { falgs: 'article', disabled: false, list1: [], list2: [{id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3}, {id: 4, name: 4}, {id: 5, name: 5}, {id: 6, name: 6}, {id: 7, name: 7}, {id: 8, name: 8}, {id: 9, name: 9}, {id: 10, name: 10} ] } }, computed: { }, methods: { end (ev) { if (ev.to.className === 'dragArea11') { this.$set(this.list2[ev.oldIndex], 'flag', true) } }, start22 (event) { this.falgs = '222222' }, end22 (ev) { this.falgs = 'article' }, handleDel (index, id) { this.list1.splice(index, 1) let q = this.list2.find((value, index, arr) => { return value.id === id }) this.$set(q, 'flag', false) } } } </script> <style lang="scss" scoped> .list-complete-item { cursor: pointer; position: relative; font-size: 14px; padding: 5px 12px; display: inline-block; margin-right: 20px; width: 50px; height: 50px; border: 1px solid #bfcbd9; transition: all 1s; } .list-complete-item.sortable-chosen { background: #4AB7BD; } .list-complete-item.sortable-ghost { background: #30B08F; } .undraggable { background-color: red; } .list-complete-enter, .list-complete-leave-active { opacity: 0; } </style>
项目中options配置项的说明：
:options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
1、要实现两个组件之间的拖拽，需要两个组件的options的 group 名称保持一致！ group：'111'或者group:{name:'111'}，写法都可以。
2、group里面的 pull:'clone' 表示克隆拖拽的项，这样配置之后，会保留被拖拽的项。
3、filter: '.undraggable' , .undraggable 在本案例中，实际上是取得html的动态样式 undraggable，用来单独配置某个组件是否可以重复被拖拽，可以用逗号隔开配置多个
在本案例中，拖拽一次，就被禁止再次拖拽。
4、sort，值为true或者false，是否允许拖拽排序。
5、disabled，值为true或者false，是否允许其他项目被拖拽到本组件中，false同时也禁止了本组件的拖拽功能。
--------------------------------------------------------------------------------
下面是比较全面的配置项API options说明，以及事件说明：
group参数说明：
string：命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
object：{name,pull,put}
name：同string的方法，
pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function
true:列表容器内的列表单元可以被移出；
false：列表容器内的列表单元不可以被移出；
'clone'：列表单元移出，移动的为该元素的副本；
function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function
true:列表容器可以从其他列表容器内放入列表单元；
false：与true相反；
['foo','bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值；
function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
更多参数说明：
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }