vue插件draggable实现拖拽移动图片顺序

本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法，供大家参考，具体内容如下

例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序，vuedraggable可以实现拖拽。

首先，

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") }
 );
 }
 },

datadragEnd是调换结束调用的，里面可以根据需求处理一些数据。