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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
Jquery ui css framework
Jun 28 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 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
php的ajax简单实例
2014/02/27 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
浅析JavaScript声明变量
2015/12/21 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
简单实现js浮动框
2016/12/13 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
python判断变量是否为列表的方法
2020/09/17 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
经典禁毒标语
2014/06/16 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
法制教育演讲稿
2014/09/10 职场文书
年会主持人开场白台词
2015/05/29 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers