vue拖拽組件 vuedraggable API options實現盒子之間相互拖拽排序

更多參數說明：

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

總結

以上所述是小編給大家介紹的vue拖拽組件 vuedraggable API options實現盒子之間相互拖拽排序,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com