Vue实用功能之实现拖拽元素、列表拖拽排序

目录

• Vue实现拖拽元素、列表拖拽排序
• 组件使用
• 补充：排序动画
• 总结

Vue实现拖拽元素、列表拖拽排序

需求：
    1、左右两个容器，左边和右边的元素可以拖动互换
    2、列表拖拽排序

组件使用

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础，vue2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件

npm或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

补充：排序动画

如果不熟悉Vue的transition-group，请先学习Vue的列表的排序过渡，这里不再赘述。

为了便于和上面的代码进行比较，同样一次性把全部代码贴出，可以看到代码变动并不大，只需把HTML的ul元素改为transition-group，在methods中新增shuffle方法，在CSS中新增一个过渡transition: transform .3s;即可实现开头第一张图所展示的拖拽排序效果了。

总结

到此这篇关于Vue实用功能之实现拖拽元素、列表拖拽排序的文章就介绍到这了,更多相关Vue列表拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！