vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue VueDraggablePlus

Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解

作者：墩墩大魔王丶

这篇文章主要介绍了一款功能强大、灵活易用的前端组件VueDraggablePlus,作为前端工程师,我们经常会遇到需要实现拖拽功能的场景,而VueDraggablePlus正是为了解决这一痛点而诞生的,让我们一起来看看它的特点和用法吧

VueDraggablePlus是一个功能齐全、无缝迁移、灵活使用的拖拽组件，完全继承了Sortable.js的所有功能，支持Vue 3和Vue 2，使用TypeScript编写并提供完整的TS文档，支持双向绑定和自定义容器，可以通过组件、指令或函数式调用实现拖拽功能。

官网: alfred-skyblue.gitee.io/vue-draggable-plus/

场景化引入：解决拖拽列表痛点

在日常开发中，我们经常会遇到需要实现拖拽列表的需求，但是传统的方法往往需要将拖拽功能作为列表的直接子元素来实现，这在一些情况下会受到限制。比如，当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们就很难实现拖拽列表。这时，VueDraggablePlus就派上了用场！它可以让你在任何元素上使用拖拽列表，通过指定元素的选择器，来获取到列表根元素，然后将列表根元素作为拖拽容器，轻松实现拖拽功能。

安装

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提供了多种使用方式，您可以根据自己的需求选择最适合的方式来实现拖拽功能。您可以使用组件的方式，在需要拖拽的元素上直接添加VueDraggablePlus组件；也可以使用函数的方式，通过调用函数来实现拖拽功能；还可以使用指令的方式，通过指定元素的选择器来实现拖拽功能。总有一款适合您！

<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组件的方式来实现拖拽列表，将列表项包裹在VueDraggablePlus组件内，即可轻松实现拖拽功能。

解决痛点：完美继承Sortable.js功能

VueDraggablePlus完全继承了Sortable.js的所有功能，让您可以尽情享受拖拽的乐趣。无论是拖拽排序、拖拽上传还是拖拽调整布局，VueDraggablePlus都可以轻松应对，让您的前端开发更加便捷高效。

演示：多种场景应用

VueDraggablePlus不仅功能强大，而且还支持多种场景的应用。比如双列表拖拽、克隆、自定义克隆、指定元素触发、指定目标容器、内置动画合并等，为您的项目提供了更多的可能性。

基础使用

双列表拖拽

克隆

自定义克隆

指定元素触发

指定目标容器

Transition

内置动画合并

表格行拖拽

表格列拖拽

嵌套

组件参数和事件

参数

参数说明类型默认值
animation拖动时显示动画Number0
chosenClass被选中项的 CSS 类名String'sortable-chosen'
delay选中拖拽延时Number0
delayOnTouchOnlytouch 事件延迟Number0
direction拖拽方向，默认自动判断。可选值有horizontal 和 verticalString-
disabled是否禁止拖拽Booleanfalse
dragClass拖拽项类名String'sortable-drag'
draggable指定元素内的哪些项目应该是可拖动的String-
emptyInsertThreshold拖动时鼠标必须与空可排序项的距离（以像素为单位）,以便将拖动元素插入到该可排序项中, 设置为0禁用此功能。Number5
easing简化动画。Easing-
fallbackClass当使用forceFallback的时候，被复制的dom的css类名Stringsortable-fallback
fallbackOnBody将cloned DOM 元素挂到body元素上。Booleanfalse
fallbackTolerance以像素为单位指定鼠标在被视为拖动之前应该移动多远。Number0
filter不需要进行拖动的元素String-
forceFallback忽略 HTML5拖拽行为，强制回退Booleanfalse
ghostClassdrop placeholder的css类名String'sortable-ghost'
group要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的group 值。您还可以定义列表是否可以被移出、或者克隆以及接收其他列表元素。详情查阅上方TS类型定义Group-
handle设置可拖拽句柄的css类名，如果不设置，默认对目标元素的子列表操作进行拖拽String-
invertSwap如果设置为 true，将始终使用反向交换区Booleanfalse
invertedSwapThreshold反向交换阈值，默认情况下将设置为swapThreshold 值Number-
preventOnFilter触发filter时调用event.preventDefault()Booleantrue
removeCloneOnHide删除不显示的克隆元素，而不是仅仅隐藏它Booleantrue
sort定义列表单元是否可以在列表容器内进行拖拽排序Booleantrue
swapThreshold交换区的阈值Number1
touchStartThreshold在取消延迟拖动事件之前点应该移动多少像素Number1
setData传递一个函数，函数的第一个参数为DataTransfer类型，第二个参数为HTMLElement 类型Function-
scroll是否启用滚动Boolean or HTMLElementtrue
scrollFn自定义滚动ScrollFn-
scrollSensitivity鼠标必须离边缘多近才能开始滚动，单位 pxNumber-
scrollSpeed滚动速度(ms/px)Number-
bubbleScroll将自动滚动应用于所有父元素，以便更轻松地移动Booleantrue

事件函数

事件函数名称说明类型
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拖拽一个被过滤元素时触发((event: SortableEvent) => void)
onMove拖拽移动时触发((event: MoveEvent,originalEvent: Event) => void)
onClone克隆一个元素时触发((event: SortableEvent) => void)
onChange拖拽元素改变位置时触发`((event: SortableEvent) =>

示例

通过 监听 onStart 事件, 将当前选中项的背景设置为白透明的白色。

其中 SortableEvent 的 item 即当前拖拽项, 通过改变它的 style 即可。

通过 监听 onEnd 事件, 在拖拽结束时 ,将当前选中项的背景颜色还原。

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

结语

通过本文的介绍，相信大家已经对VueDraggablePlus有了初步的了解。作为前端工程师，掌握这样一款功能强大、灵活易用的前端组件，将会为您的项目开发带来很大的便利。快来尝试一下吧，让拖拽功能变得更加简单愉快！

到此这篇关于Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解的文章就介绍到这了,更多相关Vue VueDraggablePlus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文