老师有几个问题

老师有几个问题

<!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
老师，跟着教程操作后，有几个问题。
13 0 3
老师，有几个问题
16 0 4
老师我有几个问题
15 0 5
有几个问题请老师解答一下
28 0 3

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

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

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

了解课程

本课精华内容

问答 作业

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

129 1

为什么图片这么大

27 15

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

34 14

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

40 13

laoshi老师

57 13

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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