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