当前位置：首页 > article >正文

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

article 2025/2/5 5:23:24

ue.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>

list: [
                        { name: "www.itxst.com", id: 0 },
                        { name: "www.baidu.com", id: 1 },
                        { name: "www.google.com", id: 2 },
                    ]

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