vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆（网上资源整理的文档）
效果图：
——————————————————————————–
首先需要安装vuedraggable依赖包：
npm install vuedraggable --save因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下
npm install sortablejs --save复制vue html代码到项目：
<template>
<div class="dndList">
<div class="dndList-list">
<h3>常用</h3>
<draggable :list="list1" :options="{group:'article', disabled: disabled}"
@start="start22"
@end="end22"
class="dragArea11"
style="height: 100px">
<div v-for="(element, index) in list1" :key="element.id" class="list-complete-item">
<div class="list-complete-item-handle">{{element.name}}</div>
<div>
<i class="el-icon-delete" @click="handleDel(index, element.id)"></i>
</div>
</div>
</draggable>
</div>
<div style="width: 100%; height: 10px; background-color: #bfbfbf"></div>
<div class="dndList-list">
<h3>所有</h3>
<draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
@end="end"
class="dragArea">
<div v-for="element in list2" :key="element.id"
:class="{undraggable : element.flag}"
class="list-complete-item">
<div class="list-complete-item-handle2"> {{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) {
