时间:2021-05-26
本文实例为大家分享了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是调换结束调用的,里面可以根据需求处理一些数据。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JSHTML5拖拽上传图片预览HTML5拖拽移动列表实现思路:1.循环设置每个子项的draggable
vue拖拽克隆clone组件API,vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档)效果图:--------------------
本文实例为大家分享了Vue实现移动端拖拽交换位置的具体代码,供大家参考,具体内容如下点击图片删除,拖拽可更改顺序,共4张删除该图片?删除取消exportdefa
快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下1.下载包:npminstallvuedraggable配置:package.json"d
Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。具体说明,请参考:学习链接npm官方演示:vuedraggable特性:支持触摸设