背景
最近在自主学习微信小程序的开发;对于零基础入门(没有学习过前端)的我,查阅了许多微信小程序拖拽的实现,大部分要么实现起来太复杂了,要么封装组件太复杂了,附带了拖拽之后排序等功能;因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现;
原理
这边采用了 微信小程序中的 bindtouchstart
、bindtouchmove
、bindtouchend
三兄弟 实现 开始触摸、触摸后移动、触摸结束;并加上一些坐标的转换,实现简单的 拖动功能;
第一步 touchStart
拖拽的开始 (一切尽在图中)
控件的位置为 left:posX; top:posY;
通过bindtouchstart 得到首次的触摸点坐标:touch.pageY;touch.pageX;
此时 可以得到 触摸点和 控制的位置坐标差为
chaX = touch.pageX - posX;
chaY = touch.pageY - posY;
将这两个值 暂存;用于拖动的后 位置的转换;
第二步 toucMove
通过bindtouchmove 可以得到 触摸移动的实时坐标:touch.pageY;touch.pageX;
然后通过刚刚得到chaX 和 chaY 可以转换得到 实时移动的控件位置:
new_posX = touch.pageX - chaX;
new_posY = touch.pageY - chaY;
将这两个值都更新至 控件的位置信息上;此时 可以实时渲染出 控