202112141408.gif
幫助：
??vueDraggable在線演示地址
??vueDraggable中文文檔
??gitHub地址
需求：
項目需要實現(xiàn)跨列表的拖拽，以及多級列表的拖拽，如上圖所示猾昆。之前也有用過 sortablejs(element-ui表格+sortablejs拖動排序戳這里)，主要是針對element-ui表格拖拽排序進行的處理,而vuedraggable是針對sortablejs再次封裝和使用（官方是這么說的~~）堰汉，所以看你自身需要了辽社。
image.png
使用：
//安裝
npm i -S vuedraggable
image.png
vueDraggable在線演示地址上面有詳細的代碼，所以這邊就不貼過多的代碼了衡奥。
-
Two Lists主要用于兩個列表之間的拖拽Ne -
Nested主要是多層級數(shù)據(jù)的拖拽爹袁，你可以找到它的 文件目錄,其實原理也就是多個<draggable>的嵌套
image.png
參數(shù)說明：
這里是我完成自己項目時用到的一些參數(shù)，希望可以幫助你矮固。想要直接使用的失息，可以忽略掉??。謝謝大家看到這里档址，祝大家踩坑愉快~~??
注意:如果你用到了 ghostClass或者chosenClass 定義拖拽樣式時盹兢，盡可能的用全局樣式，否則可能不生效哦~~
<!--
name 可跨越拖拽的共同類名
pull：clone 禁止拖入這里
put：false 禁止拖出這里
sort：false 禁止拖動排序
anmition 拖動時的延時動畫效果
filter 不能拖動的類名
delay 延遲多少ms時拖動守伸，防止用戶誤操作
-->
<draggable
:list="list"
class="drag_list"
:group="{ name: 'drag', pull: 'clone', put: false }"
:anmition="500"
:delay="20"
:sort="false"
animation="500"
filter=".not-drag"
>
<div
v-for="item in list"
:key="item.id"
class="list-group-item"
:class="{ 'not-drag': item.notDrag }"
>
<span class="appid">{{ item.id }}</span>
<span class="yymc">{{ item.id }}</span>
<span class="tb">{{ item.id }}</span>
<span class="bm">{{ item.id }}</span>
</div>
</draggable>
image.png
