尤雨溪都在推荐的 Vue 拖拽库!

  • 2,896 views
  • 阅读模式

尤雨溪都在推荐的 Vue 拖拽库!

最近看到尤雨溪推荐了一个基于 Vue 的拖拽库:VueDraggablePlus,本文就来看看这个拖拽库有什么特别之处!

尤雨溪都在推荐的 Vue 拖拽库!

概念

Sortablejs 是一个非常流行的拖拽库,不过这个库的 Vue 3 版本已经三年没更新了,可以说是已经跟 Vue 3 严重脱节,所以诞生了这个项目,这个组件是基于 Sortablejs 的。

尤雨溪都在推荐的 Vue 拖拽库!

在 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>
尤雨溪都在推荐的 Vue 拖拽库!
VueDraggablePlus 提供非常多的 API:

参数说明类型默认值
animation拖动时显示动画Number0
chosenClass被选中项的 css 类名String'sortable-chosen'
delay选中拖拽延时Number0
delayOnTouchOnlytouch 事件延迟Number0
direction拖拽方向,默认自动判断'vertical'\'horizontal'
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\HTMLElement
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试图拖拽一个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

weinxin
扫码关注微信公众号--IT老五
微信扫一扫关注公众号,获取更多实用app,订阅地址不定时更新
auto
  • 本文由 发表于 2023-12-15 17:12:43
  • 转载请务必保留本文链接:https://itlao5.com/10741.html
评论  1  访客  1
    • 今日新闻
      今日新闻 1

      文章不错支持一下吧

    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定