羞辱尤娜2,以下哪个关于南天国的说法不正确,fs2you资源
本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法，供大家参考，具体内容如下
例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序，vuedraggable可以实现拖拽。
首先，
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") }
);
}
},
datadragend是调换结束调用的，里面可以根据需求处理一些数据。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论