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/