curPoint.x += touch.pageX - startPoint.x
老师这段代码看起来就像是3=3+2-1,很奇怪,不理解,请问这等号左边的curPoint是指的哪个坐标,等号右边的curPoint是指的哪个坐标?
正在回答 回答被采纳积分+1
同学你好,问题解答如下:
curPoint.x += touch.pageX - startPoint.x的确等价于:curPoint.x =curPoint.x + (touch.pageX - startPoint.x),其中等号右侧的curPoint.x是上一次拖拽结束后元素的位置,而touch.pageX - startPoint.x是本次元素移动了多少;本次拖动结束后,上一次元素的最终位置curPoint.x(也就是本次元素拖拽的初始位置),加上本次拖拽的距离touch.pageX - startPoint.x,就是本次拖拽结束元素的位置。如下:
初始时curPoint={x:0,y:0},即元素未拖动。
第一次拖动,拖动结束后,如果x方向,touch.pageX - startPoint.x=10px,即元素x方向移动了10px,我们记录一下元素的当前位置:curPoint.x += touch.pageX - startPoint.x,即curPoint.x=10;
第二次拖动,拖动过程中,元素需要在上一次拖动结束后的位置的基础上,进行移动。根据diffPoint.x = touch.pageX - startPoint.x,如果diffPoint.x=5,那么元素的实际位置相对于最初,应该是移动了15px,即 movePoint.x = diffPoint.x + curPoint.x=5+10=15。本次拖拽结束后,需要更新元素的最终位置curPoint.x ,即curPoint.x += touch.pageX - startPoint.x=10+5=15,依此类推。
同学再试着理解一下。
如果我的回答帮到了你,欢迎采纳,祝学习愉快!
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星