这篇文章主要介绍了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中全局引用也行在需要的页面也用也没问题 （我因为就一个页面需要我就单页面引入的）
<script>import draggable from "vuedraggable"export default { components: { draggable }}</script>第三步：安装和引用都完成了，现在开始使用了。
<template> <div class="col"> <draggable v-model="data" filter=".forbid" animation="300" :move="onMove"> <transition-group> <div v-for="(item, index) in data" :key="index"> <div class="img-hover"> <img :src="'http://xxxxx' + item.img"/> </div> </div> </transition-group> </draggable> </div></template>注意：
这样，一个简单的图片拖拽排序的简单demo就完成了。
项目draggable拖拽移动图片顺序
第一步、导入
npm i vuedraggable第二步、组件引入
import draggable from 'vuedraggable';第三步、定义组件
components: { draggable},第四步、页面中使用
<template> <div class="app-container"> <div :class="canEdit? 'dargBtn-lock el-icon-unlock': 'dargBtn-lock el-icon-lock' " @click="removeEvent()">{{canEdit? '调整':'锁定'}}</div> <ul class="projset-content"> <draggable :move="onMove" :list="imgList" handle=".dargBtn" :animation="200" filter=".undraggable" > <li v-for="(item, index) in imgList" :key="index" :class="canEdit ? 'draggable' : 'undraggable'"> <div class="dargBtn"> <svg-icon icon-class="drag" /> </div> <img :src="item.path" alt=""> <span>{{item.name}}</span> </li> </draggable> </ul> </div></template><script> import draggable from 'vuedraggable'; export default { components: { draggable}, data(){ return{ canEdit:true, imgList: [ { path: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg', name: '1', }, { path: 'https://lupic.cdn.bcebos.com/20210629/26202931_14.jpg', name: '2', }, { path: 'https://lupic.cdn.bcebos.com/20210629/27788166_14.jpg', name: '3', } ] } }, created() { }, mounted(){}, methods:{ onMove(relatedContext, draggedContext){ console.log(relatedContext.relatedContext.list); }, removeEvent (item) { if(this.canEdit){ this.canEdit = false; }else{ this.canEdit = true; } console.log(this.canEdit); } } }</script><style scoped lang="scss"> .app-container{ background: #ffffff; height: 100%; .dargBtn-lock{ margin: 0px 50px; color: #2ea9df; } .projset-content{ list-style-type: none; position: relative; li{ display: inline-block; margin: 10px; } img{ width: 141px; height: 100px; } span{ justify-content: center; display: flex; } .dargBtn{ position: absolute; line-height: 100px; text-align: center; width: 141px; height: 100px; display: none; color: white; background: rgba(101, 101, 101, 0.6); } .draggable{ cursor: pointer; width: 141px; height: 100px; } .draggable:hover .dargBtn{ display: block; } } }</style>关于“vue怎么实现拖动图片进行排序Vue.Draggable”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue怎么实现拖动图片进行排序Vue.Draggable”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
