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

本文实例为大家分享了某视频剪辑软件插件可拖动的实现拖拽移动图片顺序的具体方法，供大家参考，具体内容如下

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

首先，

npm i vuedraggable然后在组件中引入，

从“vuedraggable”导入可拖动的；定义组件，

组件： {可拖动，},标签中应用，

保险商实验所类='pic-list clearfix '可拖动类=' list-group ' v-model=' hotVOList ' : options=' { animation : 60，} ' : move=' getdata ' @ update=' datadragEnd ' Li v-for='(子，索引)在hotVOList ' : key=' index ' img : src=' http : child。picserverurl 1 ' alt=' div class=' edit-pop dn '-div class=' edit-box dn ' span class=' banner-edit-BTN ' @ click=' eidtBanner(child。' id)'编辑/span class=' banner-cancel-BTN ' @ click=' DelateBanner(子。' id)'删除/span/div-img class=' prod-choose ' v-if=' child。标志==1 ' src=' http :/./资产/图像/不选择。png ' alt=' ' @ click=' selectProd(child。detailid)' img class=' prod-choose ' v-else-if=' child。标志==2 ' src=' http :/./资产/图像/产品选择。png ' @ click=' selectprod 2(子。detailid)' alt=' div class=' edit-box-bottom ' v-if=' child。属性=' 1 ' span class=' conf-con ' { child。good name } }/span p class=' product-money ' span class=' lower '低至/span{ { child。lowst price } }/p/div div class=' edit-box-bottom ' v-else span class=' conf-con ' { child。good name } }/span p class=' product-money ' img src=' http :/./资产/图像/杜悦。png ' alt=' span class=' browse num“{ child。浏览号码} }/span img src=' http :/./资产/图像/赞。png ' alt=' span class=' browse num " { child。拇指号码} }/span/p/div/Li/可拖动/ul方法，

getdata (data) { }，datadragEnd(evt){ var oneId=' '；var OtherID=//console . log(' DataDragend方法');console.log('拖动前的索引：' evt.oldIndex) console.log('拖动后的索引： ' evt。newindex)if(evt。newindex==这个。hotvolist。长度-1这个。页面数据。页码数学。天花板(这个。页面数据。总计/10)){这个.$ API。get('/mall config/hot _ goods _ list/' this。addhotmallid，{页码： this。页面数据。页码1，页面大小：这个。页面数据。页面大小}，su={ if(su。httpcode==200){ this。新hotvolist=su。数据。hotvolistoneId=su.data.hotVOList[0].Departiaid其他id=这个。HotVolist[evt。新索引].Departiaid这个$ API。get('/mall config/hot _ product/exhage _ turn/' this。addhotmallid，{ oneId: oneId，otherId :otherId，}，su={ if(su。httpcode==200){ this。getbodylist(这个。addhotmallid)；} }，err={}，{ accessToken :会话存储。getitem(' AccessToken ')})；} }，err={}，{ accessToken :会话存储。getitem(' AccessToken ')})else if(evt。新索引==这个。hotvolist。长度-1这个。页面数据。页码==数学。天花板(这个。页面数据。total/10)){ otherId=this。hotvolist[evt。新索引].DepartiaidoneId=-1；这个$ API。get('/mall config/hot _ product/exhage _ turn/' this。addhotmallid，{ oneId: oneId，otherId :otherId，}，su={ if(su。httpcode==200){ this。getbodylist(这个。addhotmallid)；} }，err={}，{ accessToken :会话存储。getitem(' AccessToken ')})；} else { OtherID=this。HotVolist[evt。新索引].DepartiaidoneId=this。HotVolist[evt。新索引1]。Departiaid这个$ API。get('/mall config/hot _ product/exhage _ turn/' this。addhotmallid，{ oneId: oneId，otherId :otherId，}，su={ if(su。httpcode==200){ this。getbodylist(这个。addhotmallid)；} }，err={}，{ accessToken :会话存储。getitem(' AccessToken ')})；} }，datadragEnd是调换结束调用的，里面可以根据需求处理一些数据。

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