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 读后台cookie代码
Sep 15 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
es6中let和const的使用方法详解
Feb 24 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP静态成员变量
2017/02/14 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python实现字典依据value排序
2016/02/24 Python
python实现kMeans算法
2017/12/21 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python获取中文字符串长度的方法
2018/11/14 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
什么是serialVersionUID
2016/03/04 面试题
采购部长岗位职责
2014/06/13 职场文书
文明好少年事迹材料
2014/08/19 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
民事代理词范文
2015/05/25 职场文书
python 中的jieba分词库
2021/11/23 Python