vue插件draggable實現(xiàn)拖拽移動圖片順序
更新時間:2018年12月01日 11:03:12 作者:Zxiuping
這篇文章主要為大家詳細介紹了vue插件draggable實現(xiàn)拖拽移動圖片順序,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue插件draggable實現(xiàn)拖拽移動圖片順序的具體方法,供大家參考,具體內容如下
例如圖片顯示的這種圖片列表、商品展示需要拖動圖片改變順序,vuedraggable可以實現(xiàn)拖拽。
首先,
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是調換結束調用的,里面可以根據需求處理一些數(shù)據。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10ElementUI中el-input無法輸入、修改及刪除問題解決辦法
這篇文章主要給大家介紹了關于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產生是因為input在vue中的受控,我們需要去重新改變一下監(jiān)聽和實現(xiàn),需要的朋友可以參考下2023-11-11