Vue3 支持多种拖拽方式的组件库（vue拖拽布局插件）

vue-draggable-plus 是一个功能强大、灵活且易于使用的拖拽组件库，它通过提供丰富的 API 和良好的类型支持，帮助开发者在应用开发中实现拖拽功能，可以用于各种需要拖拽交互的场景。

单列拖拽

双列拖拽

嵌套拖拽

更多拖拽功能：可克隆元素、指定元素、指定容器、表格行、列拖拽、嵌套拖拽。

组件安装：

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: '1',
    id: 1
  },
  {
    name: '2',
    id: 2
  },
  {
    name: '3',
    id: 3
  }
])
</script>

部分 API 介绍：

功能和特性：

功能齐全：全面继承了 Sortable.js 的所有功能，提供完整的拖拽和排序能力。

无缝迁移：兼容 Vue 3 和 Vue 2，使得开发者可以在不同版本的 Vue 项目中轻松迁移或集成。

灵活使用：支持通过组件、指令或函数式调用等多种方式来使用，满足不同场景的需求。

类型强：使用 TypeScript 编写，提供了完整的 TypeScript 文档，为开发者提供了更好的类型检查和自动完成支持。

双向绑定：支持 v-model 双向绑定，使得数据的同步更加方便和直观。

自定义容器：允许开发者将指定的容器作为拖拽容器，提供了更高的自定义能力。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/Alfred-Skyblue/vue-draggable-plus

官方文档：https://vue-draggable-plus.pages.dev/