curPoint.x += touch.pageX - startPoint.x

curPoint.x += touch.pageX - startPoint.x

http://img1.sycdn.imooc.com//climg/5edd96e909f02d5404740036.jpg

老师这段代码看起来就像是3=3+2-1,很奇怪,不理解,请问这等号左边的curPoint是指的哪个坐标,等号右边的curPoint是指的哪个坐标?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2020-06-08 11:08:12

同学你好,问题解答如下:

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,依此类推。

同学再试着理解一下。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

 


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师