欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù)據。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Vue接入高德地圖的完整實例

    Vue接入高德地圖的完整實例

    近期在用vue做一個環(huán)保類的項目,要求使用高德地圖,下面這篇文章主要給大家介紹了關于Vue接入高德地圖的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-06-06
  • Vue項目全局配置微信分享思路詳解

    Vue項目全局配置微信分享思路詳解

    這篇文章給大家介紹了vue項目全局配置微信分享思路講解,使用vue作為框架,使用vux作為ui組件庫,具體內容詳情大家跟隨腳本之家小編一起學習吧
    2018-05-05
  • 詳解從新建vue項目到引入組件Element的方法

    詳解從新建vue項目到引入組件Element的方法

    本篇文章主要介紹了詳解從新建vue項目到引入組件Element的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • vue?v-if未生效問題及解決

    vue?v-if未生效問題及解決

    這篇文章主要介紹了vue?v-if未生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue 2中ref屬性的使用方法及注意事項

    Vue 2中ref屬性的使用方法及注意事項

    這篇文章主要給大家介紹了關于Vue 2中ref屬性的使用方法及注意事項的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編一起來學習學習吧。
    2017-06-06
  • vite+ts vite.config.ts使用path報錯問題及解決

    vite+ts vite.config.ts使用path報錯問題及解決

    這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue開發(fā)中關于axios的封裝過程

    vue開發(fā)中關于axios的封裝過程

    這篇文章主要介紹了vue開發(fā)中關于axios的封裝過程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 解決Vue中 父子傳值 數(shù)據丟失問題

    解決Vue中 父子傳值 數(shù)據丟失問題

    這篇文章主要介紹了解決Vue中 父子傳值 數(shù)據丟失問題,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue路由傳參的基本實現(xiàn)方式小結【三種方式】

    vue路由傳參的基本實現(xiàn)方式小結【三種方式】

    這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結合實例形式總結分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下
    2020-02-02
  • ElementUI中el-input無法輸入、修改及刪除問題解決辦法

    ElementUI中el-input無法輸入、修改及刪除問題解決辦法

    這篇文章主要給大家介紹了關于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產生是因為input在vue中的受控,我們需要去重新改變一下監(jiān)聽和實現(xiàn),需要的朋友可以參考下
    2023-11-11

最新評論