欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue插件draggable实现拖拽移动图片顺序

程序员文章站 2023-01-20 15:32:29
本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下 例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序...

本文实例为大家分享了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是调换结束调用的,里面可以根据需求处理一些数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。