vuedraggable


最近在做PC項目,一個比較復雜的后台管理項目,需求有個效果是拖拽,因此接觸了vuedraggable,以下總結一下。

其實最開始用的是sortable,但是有些問題,因此后來改用了vuedraggable,它也是基於sortable的。

1、簡單用法

  用draggable標簽包住想要實現拖拽效果的范圍,並且設置v-model的值與里邊的循環數據一致即可

2、多個數組之間的拖拽

  同樣,將想拖拽內容用draggable標簽包裹,並設置屬性值group,一樣的group代表為一個分組,可以彼此之間拖拽

  主要用的三個事件,start、end,用@方式綁定

             :move用這個方式綁定,並且只有一個參數evt

             兩邊有兩個主要的對象:draggedContext    被拖拽元素的相關參數對象

                            index,element,futureIndex

                        relatedContext      被拖入區域的相關參數對象

                            index,element,list,components

更多的參數配置查看:https://blog.csdn.net/zjiang1994/article/details/79809687

tips:

  問題:1)如果move方法報錯,升一下draggable的版本,我的版本是2.21.0

     2)這種用move中的參數判斷最終拖動位置的方法,在目標值為空的時候,會無法判斷,可以添加一條假數據,拖動后再講其刪除

     3)還有一個很魔幻的問題,在我打開瀏覽器開發者模式時,拖動不生效,關閉后才生效。

        所以調試的時候,如果代碼沒問題但是拖動不生效,可以嘗試將開發者模式關閉后再查看是否生效


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM