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

1. 安裝

yarn add vuedraggable

npm i -S vuedraggable

2. 對應(yīng)頁面引用

  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>

注意：父級不能拖拽成子級，子級不能拖拽成父級，不同父級里面的子級可以相互拖動(dòng)，各父級相互拖動(dòng)，相應(yīng)設(shè)置為 ： 父級 :group="{name: 'people', pull: true}" 子級 :group="{name: 'child', pull: true}" 如果父子可以相互拖拽，則name 名稱改為一樣即可（name可以隨意?。?/code>

       string：命名，個(gè)人建議用元素id就行,用處是為了設(shè)置可以拖放容器時(shí)使用，在array中的put的設(shè)置中再做介紹；
       object：{name,pull,put}
               name：同string的方法，
               pull：pull用來定義從這個(gè)列表容器移動(dòng)出去的設(shè)置，true/false/'clone'/function
                   true:列表容器內(nèi)的列表單元可以被移出；
                   false：列表容器內(nèi)的列表單元不可以被移出；
                   'clone'：列表單元移出，移動(dòng)的為該元素的副本；
                   function：用來進(jìn)行pull的函數(shù)判斷，可以進(jìn)行復(fù)雜邏輯，在函數(shù)中return false/true來判斷是否移出；
               put：put用來定義往這個(gè)列表容器放置列表單元的的設(shè)置，true/false/['foo','bar']/function
                   true:列表容器可以從其他列表容器內(nèi)放入列表單元；
                   false：與true相反；
                   ['foo','bar']：這個(gè)可以是一個(gè)字符串或者是字符串的數(shù)組，代表的是group配置項(xiàng)里定義的name值；
                   function：用來進(jìn)行put的函數(shù)判斷，可以進(jìn)行復(fù)雜邏輯，在函數(shù)中return false/true來判斷是否放入；