快捷導(dǎo)航

Vue中靈活拖拽的前端神器VueDraggablePlus的用法詳解

更新時(shí)間：2024年03月06日 14:46:23 作者：墩墩大魔王丶

這篇文章主要介紹了一款功能強(qiáng)大、靈活易用的前端組件VueDraggablePlus,作為前端工程師,我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)拖拽功能的場景,而VueDraggablePlus正是為了解決這一痛點(diǎn)而誕生的,讓我們一起來看看它的特點(diǎn)和用法吧

VueDraggablePlus是一個(gè)功能齊全、無縫遷移、靈活使用的拖拽組件，完全繼承了Sortable.js的所有功能，支持Vue 3和Vue 2，使用TypeScript編寫并提供完整的TS文檔，支持雙向綁定和自定義容器，可以通過組件、指令或函數(shù)式調(diào)用實(shí)現(xiàn)拖拽功能。

官網(wǎng): alfred-skyblue.gitee.io/vue-draggable-plus/

場景化引入：解決拖拽列表痛點(diǎn)

在日常開發(fā)中，我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)拖拽列表的需求，但是傳統(tǒng)的方法往往需要將拖拽功能作為列表的直接子元素來實(shí)現(xiàn)，這在一些情況下會(huì)受到限制。比如，當(dāng)我們使用一些組件庫時(shí)，如果組件庫中沒有提供列表根元素的插槽，我們就很難實(shí)現(xiàn)拖拽列表。這時(shí)，VueDraggablePlus就派上了用場！它可以讓你在任何元素上使用拖拽列表，通過指定元素的選擇器，來獲取到列表根元素，然后將列表根元素作為拖拽容器，輕松實(shí)現(xiàn)拖拽功能。

安裝

npm install vue-draggable-plus

<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>

alfred-skyblue.gitee.io/vue-draggable-plus

使用說明：多種用法靈活選擇

VueDraggablePlus提供了多種使用方式，您可以根據(jù)自己的需求選擇最適合的方式來實(shí)現(xiàn)拖拽功能。您可以使用組件的方式，在需要拖拽的元素上直接添加VueDraggablePlus組件；也可以使用函數(shù)的方式，通過調(diào)用函數(shù)來實(shí)現(xiàn)拖拽功能；還可以使用指令的方式，通過指定元素的選擇器來實(shí)現(xiàn)拖拽功能。總有一款適合您！

<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組件的方式來實(shí)現(xiàn)拖拽列表，將列表項(xiàng)包裹在VueDraggablePlus組件內(nèi)，即可輕松實(shí)現(xiàn)拖拽功能。

解決痛點(diǎn)：完美繼承Sortable.js功能

VueDraggablePlus完全繼承了Sortable.js的所有功能，讓您可以盡情享受拖拽的樂趣。無論是拖拽排序、拖拽上傳還是拖拽調(diào)整布局，VueDraggablePlus都可以輕松應(yīng)對(duì)，讓您的前端開發(fā)更加便捷高效。

演示：多種場景應(yīng)用

VueDraggablePlus不僅功能強(qiáng)大，而且還支持多種場景的應(yīng)用。比如雙列表拖拽、克隆、自定義克隆、指定元素觸發(fā)、指定目標(biāo)容器、內(nèi)置動(dòng)畫合并等，為您的項(xiàng)目提供了更多的可能性。

組件參數(shù)和事件

參數(shù)

參數(shù)	說明	類型	默認(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)判斷。可選值有horizontal 和 vertical	String	-
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	簡化動(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 or HTMLElement	true
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

事件函數(shù)

事件函數(shù)名稱	說明	類型
onChoose	元素被選中時(shí)觸發(fā)	((event: SortableEvent) => void)
onUnchoose	元素取消選中時(shí)觸發(fā)	((event: SortableEvent) => void)
onStart	拖拽開始時(shí)觸發(fā)	((event: SortableEvent) => void)
onEnd	拖拽結(jié)束時(shí)觸發(fā)	((event: SortableEvent) => void)
onAdd	元素從一個(gè)列表拖拽到另一個(gè)列表時(shí)觸發(fā)	((event: SortableEvent) => void)
onUpdate	元素順序更新時(shí)觸發(fā)	((event: SortableEvent) => void)
onSort	列表任何更改都會(huì)觸發(fā)	((event: SortableEvent) => void)
onRemove	元素從列表中移除時(shí)觸發(fā)	((event: SortableEvent) => void)
onFilter	拖拽一個(gè)被過濾元素時(shí)觸發(fā)	((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) =>

示例

通過監(jiān)聽 onStart 事件, 將當(dāng)前選中項(xiàng)的背景設(shè)置為白透明的白色。

其中 SortableEvent 的 item 即當(dāng)前拖拽項(xiàng), 通過改變它的 style 即可。

通過監(jiān)聽 onEnd 事件, 在拖拽結(jié)束時(shí) ,將當(dāng)前選中項(xiàng)的背景顏色還原。

<template>
  <VueDraggable ref="el" v-model="list" @start="onStart" @end="onEnd">
    <div v-for="item in list" :key="item.id" class="drag-item">
      <NodejsButton :title="item.name" />
    </div>
  </VueDraggable>
</template>

<script setup>
import { ref } from 'vue'
import NodejsButton from '@/components/button/nodejs-button.vue'
import { VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Aoooooo',
    id: 1
  },
  {
    name: 'Boooooo',
    id: 2
  },
  {
    name: 'Coooooo',
    id: 3
  },
  {
    name: 'Doooooo',
    id: 4
  }
])

const onStart = (e) => {
  e.item.style.backgroundColor = '#ffffff22'
}
const onEnd = () => {}
</script>

<style>
.drag-item {
  width: 240px;
  margin-bottom: 15px;
  cursor: grab;
  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>