vue拖拽插件vuedraggable 子级可以拖拽到不同父级里

需求：父级之间可以相互拖拽，子级不能拖成父级，父级也不能拖成子级，不同父级里面的子级可以相互拖拽

1. 安装

yarn add vuedraggable

npm i -S vuedraggable

2. 对应页面引用

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

3. 代码

<template>
  <div class="treeDrag">
    <draggable :list="data" :options="{ forceFallback: true }"  :sort="false" :group="{name: 'people', pull: true}" ghost-class="ghostClass">
      <div class="firstLevel" v-for="item in data" :key="item.id">
          <div class="leverFirst">
            {{item.name}}
          </div>
        <draggable :list="item.children" :options="{ forceFallback: true }"  :sort="false" :group="{name: 'child', pull: true}" ghost-class="ghostClass" >
          <div class="SecondLevel" v-for="it in item.children" :key="it.id">
            <div class="leverSecond">
              -{{it.name}}
            </div>
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'treeDrag',
  components: { draggable },
  data () {
    return {
      data: [{
        name: '我是一级分类1',
        id: 1,
        type:1,
        children: [{
          name: '我是二级分类10',
          id: 10,
          type:2
        }, {
          name: '我是二级分类11',
          id: 11,
          type:2
        }]
      }, {
        name: '我是一级分类2',
        id: 2,
        type:1,
        children: [{
          name: '我是二级分类20',
          id: 20,
          type:2
        }]
      }]
    }
  }
}
</script>
<style scoped>

  .treeDrag{
    width:300px;
    color: #fff;
    margin-left:auto;
    margin-right:auto;
  }
  .firstLevel{
    background:red;
  }
  .SecondLevel{
    background:pink;
  }
  .leverThird{
    background:blue;
  }
  .leverFirst{
    border: 1px solid gray;
    width:300px;
    height:80px;
    line-height: 80px;
    text-align: center;
    font-size:20px;
    margin:1px 0px;
    cursor: move;
  }
  .leverSecond{
    border: 1px solid #BBBBBB;
    width:300px;
    height:60px;
    line-height: 60px;
    text-align: center;
    font-size:16px;
    margin:1px 0px;
    cursor: move;
  }
  .leverThird{
    border: 1px solid #EEEEEE;
    width:300px;
    height:40px;
    line-height: 40px;
    text-align: center;
    font-size:14px;
    margin:1px 0px;
    cursor: move;
  }
</style>

注意：父级不能拖拽成子级，子级不能拖拽成父级，不同父级里面的子级可以相互拖动，各父级相互拖动，相应设置为 ： 父级 :group="{name: 'people', pull: true}" 子级 :group="{name: 'child', pull: true}" 如果父子可以相互拖拽，则name 名称改为一样即可（name可以随意取）

• group：string or object

       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来判断是否放入；

• ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
• chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；

中文文档: https://segmentfault.com/a/1190000008209715#comment-area
英文文档: https://github.com/SortableJS/Vue.Draggable
参考网址: https://github.com/powhd/treeDrag
sortablejs: http://sortablejs.github.io/Sortable/