尤雨溪都在推薦的 Vue 拖拽庫！

作者：CUGGZ 2023-11-22 10:12:43

Sortablejs 是一個非常流行的拖拽庫，不過這個庫的 Vue 3 版本已經三年沒更新了，可以說是已經跟 Vue 3 嚴重脫節，所以誕生了這個項目，這個組件是基于 Sortablejs 的。

最近看到尤雨溪推薦了一個基于 Vue 的拖拽庫：VueDraggablePlus，本文就來看看這個拖拽庫有什么特別之處！

概念

在 Sortablejs 官方以往的 Vue 組件中，都是通過使用組件作為列表的直接子元素來實現拖拽列表，當使用一些組件庫時，如果組件庫中沒有提供列表根元素的插槽，就很難實現拖拽列表，vue-draggable-plus 完美解決了這個問題，它可以讓你在任何元素上使用拖拽列表，可以使用指定元素的選擇器，來獲取到列表根元素，然后將列表根元素作為 Sortablejs 的 container。

VueDraggablePlus 是一個支持 Vue2 和 Vue3 的拖拽庫，它具有以下特性：

功能齊全：全面繼承 Sortable.js 的所有功能。
無縫遷移：適用于 Vue 3 和 Vue2。
靈活使用：支持組件、指令、函數式調用，總有一款是您喜歡的。
類型強：用 TypeScript 編寫，帶有完整的 TS 文檔。
雙向綁定：支持 v-model 雙向綁定。
自定義容器：將指定容器作為拖拽容器。

使用

在使用之前，需要使用以下 npm 命令進行安裝：

npm install vue-draggable-plus

VueDraggablePlus 支持通過組件、指令、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：

參數	說明	類型	默認值
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	指定元素內的哪些項目應該是可拖動的	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，將始終使用反向交換區	Boolean	false
invertedSwapThreshold	反向交換閾值，默認情況下將設置為swapThreshold 值	Number	-
preventOnFilter	觸發filter時調用event.preventDefault()	Boolean	true
removeCloneOnHide	刪除不顯示的克隆元素，而不是僅僅隱藏它	Boolean	true
sort	定義列表單元是否可以在列表容器內進行拖拽排序	Boolean	true
swapThreshold	交換區的閾值	Number	1
touchStartThreshold	在取消延遲拖動事件之前點應該移動多少像素	Number	1
setData	傳遞一個函數，函數的第一個參數為DataTransfer類型，第二個參數為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	元素順序更新時觸發	((event: SortableEvent) => void)	-
onSort	列表的任何更改都會觸發	((event: SortableEvent) => void)	-
onRemove	元素從列表中移除進入另一個列表	((event: SortableEvent) => void)	-
onFilter	試圖拖拽一個filtered的元素	((event: SortableEvent) => void)	-
onMove	拖拽移動的時候觸發	((event: MoveEvent,originalEvent: Event) => void)	-
onClone	克隆一個元素時觸發	((event: SortableEvent) => void)	-
onChange	拖拽元素改變位置時觸發	((event: SortableEvent) => void)	-

小結

Github：https://github.com/Alfred-Skyblue/vue-draggable-plus。

責任編輯：姜華來源：前端充電寶

Sortablejs 拖拽庫

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

尤雨溪都在推薦的 Vue 拖拽庫！

概念

使用

小結