尤雨溪都在推薦的 Vue 拖拽庫(kù)！
最近看到尤雨溪推薦了一個(gè)基于 Vue 的拖拽庫(kù)：VueDraggablePlus，本文就來(lái)看看這個(gè)拖拽庫(kù)有什么特別之處！
概念
Sortablejs 是一個(gè)非常流行的拖拽庫(kù)，不過這個(gè)庫(kù)的 Vue 3 版本已經(jīng)三年沒更新了，可以說(shuō)是已經(jīng)跟 Vue 3 嚴(yán)重脫節(jié)，所以誕生了這個(gè)項(xiàng)目，這個(gè)組件是基于 Sortablejs 的。
在 Sortablejs 官方以往的 Vue 組件中，都是通過使用組件作為列表的直接子元素來(lái)實(shí)現(xiàn)拖拽列表，當(dāng)使用一些組件庫(kù)時(shí)，如果組件庫(kù)中沒有提供列表根元素的插槽，就很難實(shí)現(xiàn)拖拽列表，vue-draggable-plus 完美解決了這個(gè)問題，它可以讓你在任何元素上使用拖拽列表，可以使用指定元素的選擇器，來(lái)獲取到列表根元素，然后將列表根元素作為 Sortablejs 的 container。
VueDraggablePlus 是一個(gè)支持 Vue2 和 Vue3 的拖拽庫(kù)，它具有以下特性：
- 功能齊全：全面繼承 Sortable.js 的所有功能。
- 無(wú)縫遷移：適用于 Vue 3 和 Vue2。
- 靈活使用：支持組件、指令、函數(shù)式調(diào)用，總有一款是您喜歡的。
- 類型強(qiáng)：用 TypeScript 編寫，帶有完整的 TS 文檔。
- 雙向綁定：支持 v-model 雙向綁定。
- 自定義容器：將指定容器作為拖拽容器。
使用
在使用 之前，需要使用以下 npm 命令進(jìn)行安裝：
npm install vue-draggable-plusVueDraggablePlus 支持通過組件、指令、Hooks方式使用：
- 組件方式：
<template>
<VueDraggable ref="el" v-model="list">
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</VueDraggable>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list = ref([
{
name: 'Joao',
id: 1
},
{
name: 'Jean',
id: 2
},
{
name: 'Johanna',
id: 3
},
{
name: 'Juan',
id: 4
}
])
</script>- Hooks 方式：
<template>
<div
ref="el"
>
<div
v-for="item in list"
:key="item.id"
>
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus'
const el = ref()
const list = ref([
{
name: 'Joao',
id: 1
},
{
name: 'Jean',
id: 2
},
{
name: 'Johanna',
id: 3
},
{
name: 'Juan',
id: 4
}
])
// 返回值是一個(gè)對(duì)象，包含了一些方法，比如 start、destroy、pause 等
const draggable = useDraggable<UseDraggableReturn>(el, list, {
animation: 150,
onStart() {
console.log('start')
},
onUpdate() {
console.log('update')
}
})
</script>- 指令方式：
<template>
<div
v-draggable="[
list,
{
animation: 150,
}
]"
>
<div
v-for="item in list"
:key="item.id"
>
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const list = ref([
{
name: 'Joao',
id: 1
},
{
name: 'Jean',
id: 2
},
{
name: 'Johanna',
id: 3
},
{
name: 'Juan',
id: 4
}
])
function onStart() {
console.log('start')
}
function onUpdate() {
console.log('update')
}
</script>
VueDraggablePlus 提供非常多的 API：
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
animation | 拖動(dòng)時(shí)顯示動(dòng)畫 | Number | 0 |
chosenClass | 被選中項(xiàng)的 css 類名 | String | 'sortable-chosen' |
delay | 選中拖拽延時(shí) | Number | 0 |
delayOnTouchOnly | touch 事件延遲 | Number | 0 |
direction | 拖拽方向，默認(rèn)自動(dòng)判斷 | 'vertical'\ | 'horizontal' |
disabled | 是否禁止拖拽 | Boolean | false |
dragClass | 拖拽項(xiàng)類名 | String | 'sortable-drag' |
draggable | 指定元素內(nèi)的哪些項(xiàng)目應(yīng)該是可拖動(dòng)的 | String | - |
emptyInsertThreshold | 拖動(dòng)時(shí)鼠標(biāo)必須與空可排序項(xiàng)的距離（以像素為單位）,以便將拖動(dòng)元素插入到該可排序項(xiàng)中, 設(shè)置為0禁用此功能。 | Number | 5 |
easing | 簡(jiǎn)化動(dòng)畫。 | Easing | - |
fallbackClass | 當(dāng)使用forceFallback的時(shí)候，被復(fù)制的dom的css類名 | String | sortable-fallback |
fallbackOnBody | 將cloned DOM 元素掛到body元素上。 | Boolean | false |
fallbackTolerance | 以像素為單位指定鼠標(biāo)在被視為拖動(dòng)之前應(yīng)該移動(dòng)多遠(yuǎn)。 | Number | 0 |
filter | 不需要進(jìn)行拖動(dòng)的元素 | String | - |
forceFallback | 忽略 HTML5拖拽行為，強(qiáng)制回退 | Boolean | false |
ghostClass | drop placeholder的css類名 | String | 'sortable-ghost' |
group | 要將元素從一個(gè)列表拖到另一個(gè)列表中，兩個(gè)列表必須具有相同的group 值。您還可以定義列表是否可以被移出、或者克隆以及接收其他列表元素。詳情查閱上方TS類型定義 | Group | - |
handle | 設(shè)置可拖拽句柄的css類名，如果不設(shè)置，默認(rèn)對(duì)目標(biāo)元素的子列表操作進(jìn)行拖拽 | String | - |
invertSwap | 如果設(shè)置為 true，將始終使用反向交換區(qū) | Boolean | false |
invertedSwapThreshold | 反向交換閾值，默認(rèn)情況下將設(shè)置為swapThreshold 值 | Number | - |
preventOnFilter | 觸發(fā)filter時(shí)調(diào)用event.preventDefault() | Boolean | true |
removeCloneOnHide | 刪除不顯示的克隆元素，而不是僅僅隱藏它 | Boolean | true |
sort | 定義列表單元是否可以在列表容器內(nèi)進(jìn)行拖拽排序 | Boolean | true |
swapThreshold | 交換區(qū)的閾值 | Number | 1 |
touchStartThreshold | 在取消延遲拖動(dòng)事件之前點(diǎn)應(yīng)該移動(dòng)多少像素 | Number | 1 |
setData | 傳遞一個(gè)函數(shù)，函數(shù)的第一個(gè)參數(shù)為DataTransfer類型，第二個(gè)參數(shù)為HTMLElement 類型 | Function | |
scroll | 是否啟用滾動(dòng) | Boolean\ | HTMLElement |
scrollFn | 自定義滾動(dòng) | ScrollFn | - |
scrollSensitivity | 鼠標(biāo)必須離邊緣多近才能開始滾動(dòng)，單位 px | Number | - |
scrollSpeed | 滾動(dòng)速度(ms/px) | number | - |
bubbleScroll | 將自動(dòng)滾動(dòng)應(yīng)用于所有父元素，以便更輕松地移動(dòng) | Boolean | true |
onChoose | 元素被選中 | ((event: SortableEvent) => void) | - |
onUnchoose | 元素取消選中 | ((event: SortableEvent) => void) | - |
onStart | 元素開始拖拽 | ((event: SortableEvent) => void) | - |
onEnd | 元素取消拖拽 | ((event: SortableEvent) => void) | - |
onAdd | 元素從一個(gè)列表拖拽到另一個(gè)列表 | ((event: SortableEvent) => void) | - |
onUpdate | 元素順序更新時(shí)觸發(fā) | ((event: SortableEvent) => void) | - |
onSort | 列表的任何更改都會(huì)觸發(fā) | ((event: SortableEvent) => void) | - |
onRemove | 元素從列表中移除進(jìn)入另一個(gè)列表 | ((event: SortableEvent) => void) | - |
onFilter | 試圖拖拽一個(gè)filtered的元素 | ((event: SortableEvent) => void) | - |
onMove | 拖拽移動(dòng)的時(shí)候觸發(fā) | ((event: MoveEvent,originalEvent: Event) => void) | - |
onClone | 克隆一個(gè)元素時(shí)觸發(fā) | ((event: SortableEvent) => void) | - |
onChange | 拖拽元素改變位置時(shí)觸發(fā) | ((event: SortableEvent) => void) | - |
小結(jié)
Github：https://github.com/Alfred-Skyblue/vue-draggable-plus。
