Vue3拖拽功能【VueDraggablePlus】

一、介绍

由于 Sortablejs 的 vue3 组件一直没有更新,已经跟 vue3 严重脱节,所以诞生了这个项目,这个组件是基于 Sortablejs 的,所以如果你想了解更多关于 Sortablejs 的信息,可以查看Sortablejs 官网。VueDraggablePlus 并非一个我熟悉的 Vue.js 插件或库。在 Vue.js 生态系统中,拖拽相关的功能常常由一些流行的库来实现,例如 vue-draggablevuedraggable 等。

如果VueDraggablePlus是在这之后发布的或者是一个相对较小众的库,我建议你查看相关的文档或 GitHub 仓库,以获取详细的介绍和用法信息。以下是你可能采取的步骤:

  1. 搜索 GitHub: 在 GitHub 上搜索 VueDraggablePlus,找到相应的仓库。通常,开发者会在仓库中提供文档和用法示例。

  2. 查看 npm 页面: 如果你是通过 npm 或 yarn 安装的这个库,可以查看其在 npm 上的页面。你可以在终端中运行 npm info VueDraggablePlus 或 yarn info VueDraggablePlus 来获取有关包的信息。

  3. 查找在线文档: 如果 VueDraggablePlus 有在线文档,可以查阅这些文档以获取详细的介绍、配置选项和使用方法。

  4. 查看源代码: 如果其他方法都找不到足够的信息,你可以查看 VueDraggablePlus 的源代码,了解其 API 和实现方式。

如果你能提供更多的上下文或详细的信息,我也许可以提供更具体的帮助。

网址:VueDraggablePlus | 支持 Vue2 和 Vue3 的拖拽组件vue3拖拽排序组件icon-default.png?t=N7T8https://alfred-skyblue.github.io/vue-draggable-plus/?from=ipkd.cn

二、基础使用实例:

<template>
  <button @click="start">start</button>
  <button @click="pause">pause</button>
  <button @click="disabled = true">disabled</button>
  <div class="flex">
    <VueDraggable
      ref="el"
      v-model="list"
      :disabled="disabled"
      :animation="150"
      ghostClass="ghost"
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
      @start="onStart"
      @update="onUpdate"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

const el = ref<UseDraggableReturn>()
const disabled = ref(false)
function pause() {
  el.value?.pause()
}

function start() {
  el.value?.start()
}

const onStart = () => {
  console.log('start')
}

const onUpdate = () => {
  console.log('update')
}
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

需要更多,可到官网查询即可!

参数说明类型默认值
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)-