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

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列表拖拽排序内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！