Vue.Draggable是一款基于Sortable.js實現的vue拖拽插件，用以實現拖拽排序功能，是一款非常優秀的vue拖拽組件。本篇將介紹如何搭建環境及簡單的例子。
首先下載安裝包，在終端里執行npm install vuedraggable
當顯示包版本的時候即表示安裝成功。
本篇以Vue2為例，Vue3的安裝方式如下：npm i -S vuedraggable@next
接著需要在文件中引入：
接著就可以使用vuedraggable組件了，關于自定義組件的內容可以點擊此鏈接>>查看。
定義一個數組checkList以實現他的拖拽排序，注意draggable下要跟transition-group標簽。
vuedraggable 是標準的組件式封裝，并且將可拖動元素放進了 transition-group 上面，過渡動畫都比較好。
此處還要注意，v-model綁定的數組應與for循環的數組相同，否則將無法正確拖拽排序甚至報錯。
至此，我們就可以成功實現元素拖拽了，效果如圖所示。
若想添加頁眉或頁腳插槽，則不能與transition-group一起使用。
使用標題插槽在vuedraggable組件中添加不可拖動的元素。它應該與draggable選項一起使用來標記draggable元素。請注意，無論標題槽在模板中的位置如何，它總是被添加到默認槽之前。頁腳插槽則相反，它將始終被添加到默認槽之后。
下一篇： 超出顯示省略號
關鍵詞:
