Vue.Draggable是一款基于Sortable.js實(shí)現(xiàn)的vue拖拽插件，用以實(shí)現(xiàn)拖拽排序功能，是一款非常優(yōu)秀的vue拖拽組件。本篇將介紹如何搭建環(huán)境及簡單的例子。

首先下載安裝包，在終端里執(zhí)行npm install vuedraggable

當(dāng)顯示包版本的時(shí)候即表示安裝成功。

本篇以Vue2為例，Vue3的安裝方式如下：npm i -S vuedraggable@next

接著需要在文件中引入：

接著就可以使用vuedraggable組件了，關(guān)于自定義組件的內(nèi)容可以點(diǎn)擊此鏈接>>查看。

定義一個(gè)數(shù)組checkList以實(shí)現(xiàn)他的拖拽排序，注意draggable下要跟transition-group標(biāo)簽。

vuedraggable 是標(biāo)準(zhǔn)的組件式封裝，并且將可拖動(dòng)元素放進(jìn)了 transition-group 上面，過渡動(dòng)畫都比較好。

此處還要注意，v-model綁定的數(shù)組應(yīng)與for循環(huán)的數(shù)組相同，否則將無法正確拖拽排序甚至報(bào)錯(cuò)。

至此，我們就可以成功實(shí)現(xiàn)元素拖拽了，效果如圖所示。

若想添加頁眉或頁腳插槽，則不能與transition-group一起使用。

使用標(biāo)題插槽在vuedraggable組件中添加不可拖動(dòng)的元素。它應(yīng)該與draggable選項(xiàng)一起使用來標(biāo)記draggable元素。請注意，無論標(biāo)題槽在模板中的位置如何，它總是被添加到默認(rèn)槽之前。頁腳插槽則相反，它將始終被添加到默認(rèn)槽之后。