这篇文章主要介绍了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 vuedraggableimport 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”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
