最近在做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)還有一個很魔幻的問題,在我打開瀏覽器開發者模式時,拖動不生效,關閉后才生效。
所以調試的時候,如果代碼沒問題但是拖動不生效,可以嘗試將開發者模式關閉后再查看是否生效