vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone

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<