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


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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
JS编程小常识很有用
Nov 26 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
浅析Ajax语法
Dec 05 Javascript
js实现交通灯效果
Jan 13 Javascript
js编写选项卡效果
May 23 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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
如何过滤高亮显示非法字符
2006/10/09 PHP
php中文字符截取防乱码
2008/03/28 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
局域网定义和特性
2016/01/23 面试题
满月酒答谢词
2014/01/14 职场文书
目标责任书范本
2014/04/16 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书