VueDraggablePlus

由于 Sortablejs 的 vue3 组件一直没有更新，已经跟 vue3 严重脱节，所以诞生了这个项目，这个组件是基于 Sortablejs 的，在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container

核心优势

1. 全量能力继承 完整保留 Sortablejs 所有原生能力，拖拽动画、占位样式、分组拖拽、限制拖动等功能一应俱全，满足绝大多数业务场景。

2. 全版本Vue兼容 告别版本割裂问题，Vue2 老项目、Vue3 新项目可无缝接入，不用修改大量业务代码。

3. 多模式灵活调用 提供组件、指令、Hooks函数三种使用方式，无论是简单列表还是复杂嵌套页面，都能按需选择。

4. 原生TS友好 采用TypeScript全量开发，类型提示完善，配套完整类型文档，大幅降低类型报错问题。

5. 双向绑定极简开发 原生支持 v-model 双向绑定，拖拽完成后自动同步数组数据，无需手动编写排序、数据更新逻辑。

6. 容器高度自定义 不受DOM结构限制，任意容器都可作为拖拽区域，相比原生Sortablejs，适配性更强、拓展性更高。

快速安装 & 极简上手

安装命令一键引入，接入成本极低：

npm install vue-draggable-plus

项目中优先使用组件式开发，几行代码就能实现跨列表互相拖拽：

<template>
  <!-- 拖拽容器1 -->
  <VueDraggable
    v-model="list1"
    animation="150"
    group="dragGroup"
    ghost
  >
    <div v-for="item in list1" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>

  <!-- 拖拽容器2，同组可跨栏拖动 -->
  <VueDraggable
    v-model="list2"
    animation="150"
    group="dragGroup"
  >
    <div v-for="item in list2" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

// 基础列表数据
const list1 = ref([
  { name: 'Joao', id: '1' },
  { name: 'Jean', id: '2' },
  { name: 'Johanna', id: '3' }
])
const list2 = ref([
  { name: 'Joao-2', id: '1-2' },
  { name: 'Jean-2', id: '2-2' }
])
</script>

只需简单配置分组、动画、占位样式，就能实现丝滑的拖拽排序、跨容器移动。同时内置 update、add、remove 等事件，可监听拖拽状态，拓展二次业务逻辑。

高阶场景

除了基础的列表拖拽，它还覆盖更多复杂业务：

• 表格行、列自由拖拽排序
• 多层级嵌套组件拖拽
• 自定义拖拽手柄、禁用指定元素拖动
• 自定义拖拽样式、悬浮占位效果

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/5154