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