vue怎么实现拖动图片进行排序Vue.Draggable

这篇文章主要介绍了vue怎么实现拖动图片进行排序Vue.Draggable的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么实现拖动图片进行排序Vue.Draggable文章都会有所收获，下面我们一起来看看吧。

拖动图片进行排序Vue.Draggable

好久没接触vue的项目了，最近接到一个vue图片处理的小项目，有一项需求是要实现拖动图片就行排序。

接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件

下面是实现过程

第一步：安装Vue.Draggable。两种方式npm和yarn （我用的npm）

npm i -S vuedraggableyarn add vuedraggable

第二步：全局安装完成之后在main.js中全局引用也行在需要的页面也用也没问题 （我因为就一个页面需要我就单页面引入的）

第三步：安装和引用都完成了，现在开始使用了。

注意：

/** *代码中的data为你的数据列表，onMove为你在拖动图片是触发的函数方法。 *transition-group标签下一定是v-for循环，不然会报错。**/

这样，一个简单的图片拖拽排序的简单demo就完成了。

项目draggable拖拽移动图片顺序

第一步、导入

npm i vuedraggable

第二步、组件引入

import draggable from 'vuedraggable';

第三步、定义组件

components: { draggable},

第四步、页面中使用

关于"vue怎么实现拖动图片进行排序Vue.Draggable"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue怎么实现拖动图片进行排序Vue.Draggable"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。