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>
          <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) {
      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 rel="stylesheet/scss" 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] }

• sort：boolean 定義是否列表單元是否可以在列表容器內進行拖拽排序；
• delay：number 定義鼠標選中列表單元可以開始拖動的延遲時間；
• disabled：boolean 定義是否此sortable對象是否可用，為true時sortable對象不能拖放排序等功能，為false時為可以進行排序，相當於一個開關；
• animation：number 單位：ms，定義排序動畫的時間；
• handle：selector 格式為簡單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動；
• filter：selector 格式為簡單css選擇器的字符串，定義哪些列表單元不能進行拖放，可設置為多個選擇器，中間用“，”分隔；
• draggable：selector 格式為簡單css選擇器的字符串，定義哪些列表單元可以進行拖放
• ghostClass：selector 格式為簡單css選擇器的字符串，當拖動列表單元時會生成一個副本作為影子單元來模擬被拖動單元排序的情況，此配置項就是來給這個影子單元添加一個class，我們可以通過這種方式來給影子元素進行編輯樣式；
• chosenClass：selector 格式為簡單css選擇器的字符串，當選中列表單元時會給該單元增加一個class；
• forceFallback：boolean 如果設置為true時，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等；
• fallbackClass：string 當forceFallback設置為true時，拖放過程中鼠標附着單元的樣式；
• scroll：boolean 默認為true，當排序的容器是個可滾動的區域，拖放可以引起區域滾動

    事件：

• onChoose：function 列表單元被選中的回調函數
• onStart：function 列表單元拖動開始的回調函數
• onEnd：function 列表單元拖放結束后的回調函數
• onAdd：function 列表單元添加到本列表容器的回調函數
• onUpdate：function 列表單元在列表容器中的排序發生變化后的回調函數
• onRemove：function 列表元素移到另一個列表容器的回調函數
• onFilter：function 試圖選中一個被filter過濾的列表單元的回調函數
• onMove：function 當移動列表單元在一個列表容器中或者多個列表容器中的回調函數
• onClone：function 當創建一個列表單元副本的時候的回調函數

   事件對象：
   事件對象在各個函數中略有不同，可通過輸出對象查看對象的屬性，下面簡單列舉幾個：

• to：HTMLElement--移動到列表容器
• from：HTMLElement--來源的列表容器
• item：HTMLElement--被移動的列表單元
• clone：HTMLElement--副本的列表單元
• oldIndex：number/undefined--在列表容器中的原序號
• newIndex：number/undefined--在列表容器中的新序號

---

      方法

• option(name[,value])
  獲得或者設置項參數，使用方法類似於jQuery用法，沒有第二個參數為獲得option中第一個參數所對應的值，有第二個參數時，將重新賦給第一個參數所對應的值；
• closest
  沒理解
• toArray()
  序列化可排序的列表單元的data-id（可通過配置項中dataIdAttr修改）放入一個數組，並返回這個數組中
• sort()
  通過自定義列表單元的data-id的數組對列表單元進行排序
• save()
• destroy()