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


Posted in Javascript onDecember 01, 2018

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

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

Javascript 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 #Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 #Javascript
Vue组件Draggable实现拖拽功能
Dec 01 #Javascript
BootStrap modal实现拖拽功能
Dec 01 #Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 #Javascript
BootStrap table实现表格行拖拽效果
Dec 01 #Javascript
一次Webpack配置文件的分离实战记录
Nov 30 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
基于文本的访客签到簿
2006/10/09 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
python如何调用php文件中的函数详解
2020/12/29 Python
Python如何telnet到网络设备
2021/02/18 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
银行实习生的自我评价
2013/12/09 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
给numpy.array增加维度的超简单方法
2021/06/02 Python