怎么在vue中使用draggable实现拖拽移动图片顺序

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

关于怎么在vue中使用draggable实现拖拽移动图片顺序问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。