您好,登录后才能下订单哦!
这篇文章主要介绍了vue怎么实现拖动图片进行排序Vue.Draggable的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么实现拖动图片进行排序Vue.Draggable文章都会有所收获,下面我们一起来看看吧。
好久没接触vue的项目了,最近接到一个vue图片处理的小项目,有一项需求是要实现拖动图片就行排序。
接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件
第一步:安装Vue.Draggable。两种方式npm和yarn (我用的npm)
npm i -S vuedraggable yarn 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>
注意:
/** *代码中的data为你的数据列表,onMove为你在拖动图片是触发的函数方法。 *transition-group标签下一定是v-for循环,不然会报错。 **/
这样,一个简单的图片拖拽排序的简单demo就完成了。
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”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。