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" alt="">      <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" alt="" @click="selectProd(child.decorateId)">       <img class="prod-choose" v-else-if="child.flag == 2" src="../../assets/images/prod-select.png" @click="selectProd2(child.decorateId)" alt="">      <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" alt="">       <span class="browseNum ">{{ child.browseNum }}</span>       <img src="../../assets/images/zan.png" alt="">       <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") }    );   }  },