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

本文实例为大家分享了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是调换结束调用的，里面可以根据需求处理一些数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。