老师解释一下这段代码的意思

老师解释一下这段代码的意思

相关代码:

 function handleMove(ev) {
ev.preventDefault();

isTouchMove = true;

var touch = ev.changedTouches[0];
var diffPoint = {};
var movePoint = {
x: 0,
y: 0
};

diffPoint.x = touch.pageX - startPoint.x;
diffPoint.y = touch.pageY - startPoint.y;
​问题描述:如果开始点在(200,100)位置,而移动时touch.pageX是100,那么diffPoint.x就是
-100,这样理解对吗?那么,传入move函数的x就是负值了,不就超出body 了吗?
if (options.x) {
movePoint.x = diffPoint.x + curPoint.x;
}
if (options.y) {
movePoint.y = diffPoint.y + curPoint.y;
}

move(el, movePoint.x, movePoint.y);
}


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

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

2回答
好帮手慕星星 2021-01-23 18:53:32

同学你好,首先代码中offsetRight和offsetBottom属性是不存在的,所以有问题

http://img1.sycdn.imooc.com//climg/600bfd7f096c62a607330336.jpg

建议将自己写的代码在全部代码中进行测试,不同的代码可能效果不同,从描述上不能准确判断正确与否。

自己可以先测试下,如果实现不了边界效果,可以将自己写的全部代码粘贴上来,老师帮助测试下。

祝学习愉快!

好帮手慕星星 2021-01-23 10:46:01

同学你好,movePoint的值为负值不一定会超出body。

当translate移动的值为负值时,说明元素在初始位置的左上方向移动。如果手动移动超出了body,那么可以增加边界限制条件,当移动到边界的时候,位置保持不变,不超出即可。


另外这段代码解释如下:

http://img1.sycdn.imooc.com//climg/600b8de4090bf54107390785.jpg

祝学习愉快!

  • 提问者 慕前端2185815 #1

    当盒子在页面中间时,设置边界限制条件的话,需要判断movePonintX,movePointY的值。如果

    movePonintX大于0,判断是否小于document.body.clientWidth-el.offsetRight,正确的话是movePonintX,否则是document.body.clientWidth-el.offsetRight​;

    如果

    movePonintX小于0,判断是否小于el.offsetLeft,正确的话是movePonintX,否则是el.offsetLeft

    如果

    movePonintY大于0,判断是否小于document.body.clientHeight-el.offsetBottom,正确的话是movePonintY,否则是document.body.clientHeight-el.offsetBottom

    如果

    movePonintY小于0,判断是否小于el.offsetTop,正确的话是movePonintY,否则是el.offsetTop




    2021-01-23 15:45:47
  • 提问者 慕前端2185815 #2

    这样设置条件的理解,对吗

    2021-01-23 15:46:32
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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