介绍

在Web端做组件拖拽功能在当下的各类项目中不足为奇，因为我们拥有非常不错的第三方组件供我们使用，让我们实现这样的功能变得非常简单轻松，今天就介绍一个在Vue3中使用的一个拖拽排序组件——vue.draggable.next，它是SortableJS官方基于SortableJS针对Vue3开发的一个拖拽排序组件！从它Github的主页来看，官方实现了在各个框架（包括原生js）的JavaScript库，相信很多小伙伴或多或少都用过！

特点

• 完全支持Sortable.js特性

包括触摸设备、拖动手柄和可选文本、智能自动滚动、支持不同列表间的拖放、不依赖 jQuery

• 保持 HTML 响应式数据列表的同步
• 兼容 Vue.js 3.0 过渡组
• 取消已经可拖拽的组件
• 完全控制任何更改的事件
• 重用现有的 UI 库组件（vuetify, element, 以及vue material等等）并使用 tag 和 componentData 道具使它们可拖动

安装使用

下面我们直接安装体验一番，这里我们可以使用npm或者yarn进行安装，笔者相较于习惯yarn

yarn add vuedraggable@next
npm i -S vuedraggable@next

下面是笔者录制的一个Gif图：

//代码示例

我们可以看到是以slot插槽（slot-props）的方式实现的。

• 在两个不同的拖拽组件间相互拖拽

group属性设为一致

      
列表1
      
        
      
    

    
      
列表2
      
        
      
    

• 动画效果演示

总结

本文只是简单介绍几个例子，官方中还介绍了其它一些更加复杂的操作，包括在表格行和列的拖拽等等操作，使用它都不是难事，官网针对每一个例子都有完整的代码演示，使用起来相当的简单，如果你有类似的需求，则可以尝试使用它来实现你想要的效果，希望对你有所帮助！