vue插件draggable实现拖拽移动图片顺序
程序员文章站
2023-01-20 15:32:29
本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下
例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序...
本文实例为大家分享了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是调换结束调用的,里面可以根据需求处理一些数据。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 贾宝玉和“通灵宝玉”是什么关系?为何叫“命根子”?
下一篇: 举一反三的能力不行