vue拖拽克隆clone組件API， vue.draggable實(shí)現(xiàn)盒子之間相互拖拽排序克隆（網(wǎng)上資源整理的文檔）

效果圖：

--------------------------------------------------------------------------------

首先需要安裝vuedraggable依賴包：

npm install vuedraggable --save

因?yàn)橥献ЫM件依賴sortablejs ，如果項(xiàng)目沒(méi)有安裝sortablejs ，可能需要安裝一下

npm install sortablejs --save

復(fù)制vue html代碼到項(xiàng)目：

<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>

項(xiàng)目中options配置項(xiàng)的說(shuō)明：

:options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"

1、要實(shí)現(xiàn)兩個(gè)組件之間的拖拽，需要兩個(gè)組件的options的 group 名稱保持一致！ group：'111'或者group:{name:'111'}，寫(xiě)法都可以。
2、group里面的 pull:'clone' 表示克隆拖拽的項(xiàng)，這樣配置之后，會(huì)保留被拖拽的項(xiàng)。
3、filter: '.undraggable' , .undraggable 在本案例中，實(shí)際上是取得html的動(dòng)態(tài)樣式 undraggable，用來(lái)單獨(dú)配置某個(gè)組件是否可以重復(fù)被拖拽，可以用逗號(hào)隔開(kāi)配置多個(gè)
在本案例中，拖拽一次，就被禁止再次拖拽。
4、sort，值為true或者false，是否允許拖拽排序。
5、disabled，值為true或者false，是否允許其他項(xiàng)目被拖拽到本組件中，false同時(shí)也禁止了本組件的拖拽功能。

--------------------------------------------------------------------------------

下面是比較全面的配置項(xiàng)API options說(shuō)明，以及事件說(shuō)明：

group參數(shù)說(shuō)明：

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

更多參數(shù)說(shuō)明：

 group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }

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

    事件：

•onChoose：function 列表單元被選中的回調(diào)函數(shù)
•onStart：function 列表單元拖動(dòng)開(kāi)始的回調(diào)函數(shù)
•onEnd：function 列表單元拖放結(jié)束后的回調(diào)函數(shù)
•onAdd：function 列表單元添加到本列表容器的回調(diào)函數(shù)
•onUpdate：function 列表單元在列表容器中的排序發(fā)生變化后的回調(diào)函數(shù)
•onRemove：function 列表元素移到另一個(gè)列表容器的回調(diào)函數(shù)
•onFilter：function 試圖選中一個(gè)被filter過(guò)濾的列表單元的回調(diào)函數(shù)
•onMove：function 當(dāng)移動(dòng)列表單元在一個(gè)列表容器中或者多個(gè)列表容器中的回調(diào)函數(shù)
•onClone：function 當(dāng)創(chuàng)建一個(gè)列表單元副本的時(shí)候的回調(diào)函數(shù)

   事件對(duì)象：

   事件對(duì)象在各個(gè)函數(shù)中略有不同，可通過(guò)輸出對(duì)象查看對(duì)象的屬性，下面簡(jiǎn)單列舉幾個(gè)：

•to：HTMLElement--移動(dòng)到列表容器
•from：HTMLElement--來(lái)源的列表容器
•item：HTMLElement--被移動(dòng)的列表單元
•clone：HTMLElement--副本的列表單元
•oldIndex：number/undefined--在列表容器中的原序號(hào)
•newIndex：number/undefined--在列表容器中的新序號(hào)

--------------------------------------------------------------------------------

      方法

◦option(name[,value])
獲得或者設(shè)置項(xiàng)參數(shù)，使用方法類似于jQuery用法，沒(méi)有第二個(gè)參數(shù)為獲得option中第一個(gè)參數(shù)所對(duì)應(yīng)的值，有第二個(gè)參數(shù)時(shí)，將重新賦給第一個(gè)參數(shù)所對(duì)應(yīng)的值；
◦closest
沒(méi)理解
◦toArray()
序列化可排序的列表單元的data-id（可通過(guò)配置項(xiàng)中dataIdAttr修改）放入一個(gè)數(shù)組，并返回這個(gè)數(shù)組中
◦sort()
通過(guò)自定義列表單元的data-id的數(shù)組對(duì)列表單元進(jìn)行排序
◦save()
◦destroy()

總結(jié)

以上所述是小編給大家介紹的vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論