怎么在vue中使用draggable实现拖拽移动图片顺序？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
首先，
计算
安全
数据库
网络和加速
企业服务
npm i vuedraggable然后在组件中引入，
import draggable from 'vuedraggable';定义组件，
components: {
draggable,
},标签中应用，
<ul class="pic-list clearfix">
<draggable class="list-group" v-model="hotVOList" :options="{animation: 60,}"
:move="getdata" @update="datadragEnd">
<li v-for="(child,index) in hotVOList" :key="index">
<img :src="child.picServerUrl1" >
<div class="edit-pop dn"></div>
<!-- <div class="edit-box dn">
<span class="banner-edit-btn" @click="eidtBanner(child.id)">编辑</span>
<span class="banner-cancle-btn" @click="delateBanner(child.id)">删除</span>
</div> -->
<img class="prod-choose" v-if="child.flag == 1" src="../../assets/images/not-select.png" @click="selectProd(child.decorateId)">
<img class="prod-choose" v-else-if="child.flag == 2" src="../../assets/images/prod-select.png" @click="selectProd2(child.decorateId)" >
<div class="edit-box-bottom" v-if="child.property == 1">
<span class="conf-con">{{ child.goodsName }}</span>
<p class="product-money"><span class="lower">低至</span>￥{{ child.lowestPrice }}</p>
</div>
<div class="edit-box-bottom" v-else>
<span class="conf-con">{{ child.goodsName }}</span>
<p class="product-money">
<img src="../../assets/images/yuedu.png" >
<span class="browseNum ">{{ child.browseNum }}</span>
<img src="../../assets/images/zan.png" >
<span class="browseNum ">{{ child.thumbNum }}</span>
</p>
</div>
</li>
</draggable>
</ul>方法，
getdata (data) {
},
datadragEnd (evt) {
var oneId = "";
var otherId = "";
// console.log('datadragEnd方法');
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
if(evt.newIndex == this.hotVOList.length - 1 && this.pageData.pageNum < Math.ceil(this.pageData.total/10)){
this.$api.get("/mallConfig/hot_goods_list/" + this.addHotMallID,{
pageNum:this.pageData.pageNum+1,
pageSize:this.pageData.pageSize
},
su => {
if (su.httpCode == 200) {
this.newHotVOList = su.data.hotVOList;
oneId = su.data.hotVOList[0].decorateId;
otherId = this.hotVOList[evt.newIndex].decorateId;
this.$api.get(
"/mallConfig/hot_product/exchage_turn/" + this.addHotMallID,
{
oneId: oneId,
otherId :otherId,
},
su => {
if (su.httpCode == 200) {
this.getBodyList(this.addHotMallID);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") }
);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") })
} else if(evt.newIndex == this.hotVOList.length - 1 && this.pageData.pageNum == Math.ceil(this.pageData.total/10)){
otherId = this.hotVOList[evt.newIndex].decorateId;
oneId = -1;
this.$api.get(
"/mallConfig/hot_product/exchage_turn/" + this.addHotMallID,
{
oneId: oneId,
otherId :otherId,
},
su => {
if (su.httpCode == 200) {
this.getBodyList(this.addHotMallID);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") }
);
} else {
otherId = this.hotVOList[evt.newIndex].decorateId;
oneId = this.hotVOList[evt.newIndex + 1].decorateId;
this.$api.get(
"/mallConfig/hot_product/exchage_turn/" + this.addHotMallID,
{
oneId: oneId,
otherId :otherId,
},
su => {
if (su.httpCode == 200) {
this.getBodyList(this.addHotMallID);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") }
);
}
},关于怎么在vue中使用draggable实现拖拽移动图片顺序问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
