老师有几个问题

老师有几个问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<title>2-7自由编程</title>
		<style>
			body{
				background-color: pink;
				height: 2000px;
			}
			.box{
				position: fixed;
				top: 20px;
				left: 20px;
				width: 45px;
				height: 45px;
				background-color: firebrick;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box"></div>
		
		<script>
			var box = document.getElementById('box');
			function drag(el,options){
				options.x = typeof options.x !== 'undefined' ? options.x : true;
				options.y = typeof options.y !== 'undefined' ? options.y : false;
				if(!options.x && !options.y) return;
				var curPoint = {
					x:0,
					y:0
				};
				var startPoint = {};
				var isTouchMove = false;
				
				el.addEventListener('touchstart',handleStart,false);
				el.addEventListener('touchmove',handleMove,false);
				el.addEventListener('touchend',handleEnd,false);
				
				function handleStart(ev){
					var touch = ev.changedTouches[0];
					startPoint.x = touch.pageX;
					startPoint.y = touch.pageY;
				}
				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;
					if(options.x){
						movePoint.x = diffPoint.x + curPoint.x;
					}
					if(options.y){
						movePoint.y = diffPoint.y + curPoint.y;
					}
					move(el,movePoint.x,movePoint.y);
				}
				function handleEnd(ev){
					if(!isTouchMove) return;
					var touch = ev.changedTouches[0];
					curPoint.x += touch.pageX - startPoint.x;
					curPoint.y += touch.pageY - startPoint.y;
					isTouchMove = false;
				}
				
				
				
				var limitWidth = el.parentNode.offsetWidth - el.offsetWidth,
					limitHeight = el.parentNode.offsetHeight - el.offsetHeight;
					
				
				
				function move(el,x,y){
					if(x<0){
						x=0;
					}else if(x>limitWidth){
						x = limitWidth;
					}
					if(y<0){
						y=0;
					}else if(y >limitHeight){
						y=limitHeight;
					}
					/* x = x || 0;
					y = y || 0; */
					el.style.transform = 'translate3d(' +x+ 'px,' +y+ 'px,0)';
				}
				
				
				
			}
			//调用drag函数
			drag(box,{
				x:true,
				y:true
			});
			
			
		</script>
	</body>
</html>

Q1：这个超出边界的思路应该是什么。。

Q2：我看问答区同学写的，但是将div移到右侧边界后还是超出边界了，该怎么改

谢谢老师
hyperse 2019-09-24
源自：移动端事件   2-7 自由编程
7
收起

正在回答

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

3回答
好帮手慕慕子 回答被采纳获得+3积分 2019-09-24 17:16:50

同学你好， 底部边界没有生效可能是因为同学给body设置的高度为2000px， 页面存在滚动条， 需要将页面滚动到底部测试哦

另，老师提供的两种方法， CSS和js是独立的两种方法哦

1.通过CSS实现

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>2-7自由编程</title>
<style>
body {
background-color: pink;
height: 2000px;
}
.box {
/* position: fixed;
            top: 20px;
            left: 20px; */
width: 45px;
height: 45px;
background-color: firebrick;
}

</style>
</head>

<body>
<div class="box" id="box"></div>

<script>
var box = document.getElementById('box');

function drag(el, options) {
options.x = typeof options.x !== 'undefined' ? options.x : true;
options.y = typeof options.y !== 'undefined' ? options.y : false;
if (!options.x && !options.y) return;
var curPoint = {
x: 0,
y: 0
};
var startPoint = {};
var isTouchMove = false;

el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);
el.addEventListener('touchend', handleEnd, false);

function handleStart(ev) {
var touch = ev.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}

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;
if (options.x) {
movePoint.x = diffPoint.x + curPoint.x;
}
if (options.y) {
movePoint.y = diffPoint.y + curPoint.y;
}
move(el, movePoint.x, movePoint.y);
}

function handleEnd(ev) {
if (!isTouchMove) return;
var touch = ev.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x;
curPoint.y += touch.pageY - startPoint.y;
isTouchMove = false;
}
var limitWidth = el.parentNode.offsetWidth - el.offsetWidth,
limitHeight = el.parentNode.offsetHeight - el.offsetHeight;

function move(el, x, y) {
if (x < 0) {
// x = 0;
x = 0
} else if (x > limitWidth) {
x = limitWidth;
}
if (y < 0) {
y = 0;
} else if (y > limitHeight) {
y = limitHeight;
}
/* x = x || 0;
                y = y || 0; */
el.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)';
}



}
//调用drag函数
drag(box, {
x: true,
y: true
});
</script>
</body>

</html>

2. 通过js实现， 由于固定定位是参考当前视口的，所以需要修改为绝对定位哦

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>2-7自由编程</title>
<style>
body {
background-color: pink;
height: 2000px;
}
.box {
/* position: fixed; */
position: absolute;
top: 20px;
left: 20px;
width: 45px;
height: 45px;
background-color: firebrick;
}

</style>
</head>

<body>
<div class="box" id="box"></div>

<script>
var box = document.getElementById('box');

function drag(el, options) {
options.x = typeof options.x !== 'undefined' ? options.x : true;
options.y = typeof options.y !== 'undefined' ? options.y : false;
if (!options.x && !options.y) return;
var curPoint = {
x: 0,
y: 0
};
var startPoint = {};
var isTouchMove = false;

el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);
el.addEventListener('touchend', handleEnd, false);

function handleStart(ev) {
var touch = ev.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}

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;
if (options.x) {
movePoint.x = diffPoint.x + curPoint.x;
}
if (options.y) {
movePoint.y = diffPoint.y + curPoint.y;
}
move(el, movePoint.x, movePoint.y);
}

function handleEnd(ev) {
if (!isTouchMove) return;
var touch = ev.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x;
curPoint.y += touch.pageY - startPoint.y;
isTouchMove = false;
}
var limitWidth = el.parentNode.offsetWidth - el.offsetWidth - 20,
limitHeight = el.parentNode.offsetHeight - el.offsetHeight - 20;

function move(el, x, y) {
if (x < 0) {
// x = 0;
x = 0
} else if (x > limitWidth) {
x = limitWidth;
}
if (y < 0) {
y = 0;
} else if (y > limitHeight) {
y = limitHeight;
}
/* x = x || 0;
                y = y || 0; */
el.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)';
}



}
//调用drag函数
drag(box, {
x: true,
y: true
});
</script>
</body>

</html>


同学可以在测试与一下哦

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0
收起回答
  • hyperse 提问者 #1
    好的，我分别把老师的这两段代码测试了一下，好像是因为设置了body高度的问题。不过css那个还是在右侧无法生效，js的这段右侧和底部都生效了，我就用js的好了。。
    2019-09-24 17:32:55
  • 好帮手慕慕子 回复 提问者 hyperse #2
    同学你好， CSS方法， 老师在谷歌和火狐浏览器测试都是可以生效的哦。 建议： 同学可以清除浏览器缓存再测试一下。 可能由于浏览器版本的问题， 同学使用js方法可以实现效果就行了，这里主要是掌握实现的思路哦，而且以后更多的也是使用js实现效果哦，祝学习愉快~~~~
    2019-09-24 17:39:06
提问者 hyperse 2019-09-24 16:38:11

修改后的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<title>2-7自由编程</title>
		<style>
			body{
				background-color: pink;
				height: 2000px;
			}
			.box{
				/* position: fixed;
				top: 20px;
				left: 20px; */
				width: 45px;
				height: 45px;
				background-color: firebrick;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box"></div>
		
		<script>
			var box = document.getElementById('box');
			function drag(el,options){
				options.x = typeof options.x !== 'undefined' ? options.x : true;
				options.y = typeof options.y !== 'undefined' ? options.y : false;
				if(!options.x && !options.y) return;
				var curPoint = {
					x:0,
					y:0
				};
				var startPoint = {};
				var isTouchMove = false;
				
				el.addEventListener('touchstart',handleStart,false);
				el.addEventListener('touchmove',handleMove,false);
				el.addEventListener('touchend',handleEnd,false);
				
				function handleStart(ev){
					var touch = ev.changedTouches[0];
					startPoint.x = touch.pageX;
					startPoint.y = touch.pageY;
				}
				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;
					if(options.x){
						movePoint.x = diffPoint.x + curPoint.x-20;
					}
					if(options.y){
						movePoint.y = diffPoint.y + curPoint.y-20;
					}
					move(el,movePoint.x,movePoint.y);
				}
				function handleEnd(ev){
					if(!isTouchMove) return;
					var touch = ev.changedTouches[0];
					curPoint.x += touch.pageX - startPoint.x;
					curPoint.y += touch.pageY - startPoint.y;
					isTouchMove = false;
				}
				
				
				
				var limitWidth = el.parentNode.offsetWidth - el.offsetWidth,
					limitHeight = el.parentNode.offsetHeight - el.offsetHeight;
					
				
				
				function move(el,x,y){
					if(x<0){
						x=0;
					}else if(x>limitWidth){
						x = limitWidth;
					}
					if(y<0){
						y=0;
					}else if(y >limitHeight){
						y=limitHeight;
					}
					/* x = x || 0;
					y = y || 0; */
					el.style.transform = 'translate3d(' +x+ 'px,' +y+ 'px,0)';
				}
				
				
				
			}
			//调用drag函数
			drag(box,{
				x:true,
				y:true
			});
			
			
		</script>
	</body>
</html>


0
收起回答
好帮手慕慕子 2019-09-24 16:33:10

同学你好， 

  1. 边界判断需要获取页面的宽度，以及元素当前的坐标位置。

    例如水平方向，当水平坐标大于页面宽度-自身宽度时，将水平坐标设置成页面宽度-自身宽度即可。垂直方向一样的道理。

  2. 因为同学给方块设置了固定定位，有left和top值， 导致计算出现误差， 所以最终还是超出了。

    老师这里给提供两种两种解决方案

    （1） 通过修改CSS实现效果, 不给方块设置left、top值即可

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

    （2）通过修改js实现效果， 在限制边界上减去20即可， 另， 需要将固定定位改成绝对定位哦

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

同学可以自己下去测试一下哦

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0
收起回答
  • 提问者 hyperse #1
    老师我根据您说的，用第一个方法把css里面的这三行代码注释了，但是右边和下边的边界还是可以超出。。 接着我在这个的基础上又试了在js代码中分别在movepoint后面减去20，右侧边界生效了，但是底部依旧超出。。
    2019-09-24 16:37:48
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

这几节有嘈杂的声音，听得有点不舒服
7 0 4
老师，有几个问题
16 0 4
老师，跟着教程操作后，有几个问题。
13 0 3
老师我有几个问题
15 0 5
有几个问题请老师解答一下
28 0 3

登录后可查看更多问答，登录/注册

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

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

了解课程

本课精华内容

问答 作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下 为什么谷歌浏览器 点不了进度条 没次点击都会重新播放 用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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