Vue3拖拽功能【VueDraggablePlus】

一、介绍

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

如果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拖拽排序组件https://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>

需要更多，可到官网查询即可！