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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
Javascript Promise用法详解
May 10 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP goto语句用法实例
2019/08/06 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
用js实现in_array的方法
2013/11/05 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
js实现移动端轮播图
2020/12/21 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Python实现把数字转换成中文
2015/06/29 Python
详解python中的 is 操作符
2017/12/26 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python进程池Pool应用实例分析
2019/11/27 Python
解决Python3下map函数的显示问题
2019/12/04 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
如何把python项目部署到linux服务器
2020/08/26 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
环保公益广告语
2014/03/13 职场文书
学校施工安全责任书
2015/01/29 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
理想国读书笔记
2015/06/25 职场文书
周一给客户的问候语
2015/11/10 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python