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


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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
基于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读取xml实例代码
2010/01/28 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javascript 写类方式之二
2009/07/05 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
python列表去重的二种方法
2014/02/14 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
pytorch之添加BN的实现
2020/01/06 Python
Python decimal模块使用方法详解
2020/06/08 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
介绍Java的内部类
2012/10/27 面试题
生日宴会答谢词
2014/01/09 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
公司踏青活动方案
2014/08/16 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年幼师工作总结
2015/04/28 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书