vue.draggable.next-Vue3中后台管理系统实现拖拽排序功能

vue.draggable.next-Vue3中后台管理系统实现拖拽排序功能

vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本,同样是基于Sortable.js实现的,你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景,本人在工作台和多选项卡环境下实践过,比自己实现的拖拽效果优雅多了,使用的方法也非常简单但和vue2版本的用法有一些vue语法上的区别,本文档将会列举全部的属性和事件。

1、包安装方式:

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


2、使用

<draggable :list="list" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
            @start="onStart" @end="onEnd">
            <template #item="{ element }">
                <div class="item">
                    {{ element.name }}
                </div>
            </template>
        </draggable>

3、案例效果:

演示地址:https://www.eleadmin.cn/