Vue3拖拽插件Vue.Draggable.next

Vue3拖拽插件Vue.Draggable.next

vue.draggable.next 是一款vue3的拖拽插件,基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，具体效果可见下图
如何寻找一款优雅、简洁、好用的vue3拖拽插件，笔者在开发过程中找到了这款插件，因而做一个简单分享

上手示例

需求：实现一个可拖拽列表
1.安装插件

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

2.引入插件

import {
    
    VueDraggableNext} from 'vue-draggable-next'

3.组件编写

 <vue-draggable-next
          v-model="columns" //列表数组
          tag="transition-group" //标签名
          handle=".row-nav"
        >
           <transition-group>
            <a-row v-for="item in columns"  :key="item.id"  class="row-nav">
              <div class="iconfont icon-icon_move row-nav-icon"></div>
              <a-col class="row-nav-text">
                <a-row class="title">{
    
    {
    
     item.name }}</a-row>
              </a-col>
              <a-switch
                v-model:checked="item.checked"
                class="row-switch"
                size="small"
              ></a-switch>
            </a-row>
          </transition-group>
        </vue-draggable-next>

参考文献：
官方地址 中文文档