Element-UI标签页el-tabs组件的拖动排序实现

最新推荐文章于 2024-07-12 21:16:38 发布

weixin_30659829

最新推荐文章于 2024-07-12 21:16:38 发布

阅读量5.3k

点赞数

文章标签： javascript ui 人工智能 ViewUI

原文链接：http://www.cnblogs.com/lixiuke/p/9871441.html

版权

ElementUI的标签页组件支持动态添加删除，如下图：

但是这个组件不支持标签之间的拖动排序。那么我们自己怎样实现这个功能呢？

有一个叫vuedraggable的组件（https://github.com/SortableJS/Vue.Draggable），专门给vue使用的。但是这个组件要求必须把要排序的内容放到< draggable>标签的根下面，而el-tabs生成的子节点有很多级，就不能用这个组件了。

另外找了一个叫Sortable的组件可以完美实现拖动排序，https://github.com/RubaXa/Sortable，代码如下：

最后的实现效果：

转载于:https://www.cnblogs.com/lixiuke/p/9871441.html

关注