微信小程序 实现最简单的组件拖拽

背景

最近在自主学习微信小程序的开发;对于零基础入门(没有学习过前端)的我,查阅了许多微信小程序拖拽的实现,大部分要么实现起来太复杂了,要么封装组件太复杂了,附带了拖拽之后排序等功能;因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现;

原理

这边采用了 微信小程序中的 bindtouchstartbindtouchmovebindtouchend 三兄弟 实现 开始触摸、触摸后移动、触摸结束;并加上一些坐标的转换,实现简单的 拖动功能;

第一步 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;

将这两个值都更新至 控件的位置信息上;此时 可以实时渲染出 控

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值