微信小程序拖拽排序列表的示例代码


Posted in Javascript onJuly 08, 2020

拖拽排序列表

微信小程序拖拽排序列表的示例代码

思路

界面分为两层:

  • 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现)
  • 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件。

事件

主要监听:longpress , touchmove , touchend 三个事件

longpress

保障长按才有效,并设定许多其他值。

touchmove

滑动的时候触发

  • 判断是否需要滑动页面,因为 movable-area组件 滑动事件被catch掉,无法滑动;
  • 记录滑动经过的项,在页面【底层】设置经过项为其他样式(算是补足没有滑动动画的缺陷吧,不需要可以删除 lastTarget字段)。

touchend

滑动结束时触发

获取目标节点索引,将初始拖拽节点移动至目标节点,其中的关键代码为:

list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]); // 移动位置

(这行代码参考了Vue.Draggable中一行代码)

将其他设置置空

代码

代码片段

码云仓库 欢迎star、提问题。鞋鞋

示例

// 初始点击
  stratBtn(e){
    let index = http.dataIndex(e)[0];//获取当前点击的列表
    let busArr = this.data.busArr;//获取列表中的所有数组
    let pageY = Number(e.touches[0].pageY);//初始点击的Y点坐标
    let busActObj = busArr[index];//单独记录当前点击的数据
    this.setData({ //保存数据
      sPageY:pageY,
      mPageY:pageY,
      moveSortBox:true,
      clickIndex:index,
      busActObj:busActObj
    })
  },
  // 开始移动
  moveBtn(e){
    let pageY = Number(e.touches[0].pageY); //记录移动点的坐标
    this.setData({ //记录
      mPageY:pageY,
      moveSortBox:true,
    })
  },
  // 结束点击
  endBtn(e){
    let sPageY = Number(this.data.sPageY); //获取初始点的坐标
    let busArr = this.data.busArr; //获取数组
    let pageY = Number(e.changedTouches[0].pageY);//获取结束点的坐标
    let clickIndex = Number(this.data.clickIndex); //初始点的位置
    let busActObj = this.data.busActObj;//获取初始点的列表单独数据
    let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //每个盒子固定高度90px (结束点-初始点/盒子高度)+(初始点的位置+1)可以得到移动的位置
    busArr.splice(clickIndex,1);//删除初始数据
    busArr.splice(position,0,busActObj);//在移动点重新插入数据
    this.setData({//保存
      moveSortBox:false,
      busArr:busArr
    })
  },

参考链接

[1] SortableJS Vue.Draggable

[2] SortableJS Sortable

[3] SortableJS演示示例 Vue.Draggable

[4] 好想再胖十斤 25行代码解决小程序的拖拽排序

到此这篇关于微信小程序拖拽排序列表的示例代码的文章就介绍到这了,更多相关微信小程序拖拽排序列表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
javascript实现放大镜功能
Dec 09 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
基于javascript canvas实现五子棋游戏
Jul 08 #Javascript
深度解读vue-resize的具体用法
Jul 08 #Javascript
详解React 条件渲染
Jul 08 #Javascript
webpack5 联邦模块介绍详解
Jul 08 #Javascript
实例讲解React 组件
Jul 07 #Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
You might like
PHP实现的增强性mhash函数
2015/05/27 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python接收手机短信的代码整理
2020/08/02 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
先进个人获奖感言
2014/01/24 职场文书
双创工作实施方案
2014/03/26 职场文书
文化活动实施方案
2014/03/28 职场文书
厕所文明标语
2014/06/11 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers