vue项目draggable拖拽移动图片顺序

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

首先，

npm i vuedraggable

然后在组件中引入，

import draggable from 'vuedraggable';

定义组件，

components: {
    draggable,
  },

标签中应用，

              
                

                  
                  

                  
                   
                  
                  

                    {{ child.goodsName }}
                    
低至￥{{ child.lowestPrice }}
                  
                  

                    {{ child.goodsName }}
                    

                      
                      {{ child.browseNum }}
                      
                      {{ child.thumbNum }}
                    
                  
                
              
            

方法，

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是调换结束调用的，里面可以根据需求处理一些数据。