老师看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<style>
body {
height: 2000px;
background-color: rgb(245, 220, 241);
}
.box {
width: 50px;
height: 50px;
background-color: #f00;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
var box = document.getElementById('box');
drag(box,{
x:true,
y:true
});
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
},
start = {},
isTouchMove = false,
bodyWidth = document.body.clientWidth,
bodyHeight = document.body.clientHeight,
elWidth = el.clientWidth,
elHeight = el.clientHeight;
el.addEventListener('touchstart', handleStart);
el.addEventListener('touchmove', handleMove);
el.addEventListener('touchend', handleEnd);
function handleStart (el) {
start.left = el.getBoundingClientRect().left;
start.top = el.getBoundingClientRect().top;
}
function handleMove (e) {
e.preventDefault();
isTouchMove = true;
var diff = {},
movePoint = {
left:0,
top:0
};
movePoint.left = el.getBoundingClientRect().left;
movePoint.top = el.getBoundingClientRect().top;
movePoint.left = movePoint.left <= 0 ? 0 : movePoint.left;
movePoint.left = movePoint.left >= bodyWidth - elWidth ? bodyWidth - elWidth : movePoint.left;
movePoint.top = movePoint.top <= 0 ? 0 : movePoint.top;
movePoint.top = movePoint.top >= bodyHeight - elHeight ? bodyHeight - elHeight : movePoint.top;
diff.x = movePoint.left - start.left;
diff.y = movePoint.top - start.top;
if (options.x) {
movePoint.left = diff.x + curPoint.x;
}
if (options.y) {
movePoint.top = diff.y + curPoint.y;
}
move(el,movePoint.left,movePoint.top);
}
function handleEnd (e) {
if (!isTouchMove) return;
var endLeft = el.getBoundingClientRect().left,
endTop = el.getBoundingClientRect().top;
curPoint.x += endLeft - start.left;
curPoint.y += endTop - start.top;
isTouchMove = false;
}
function move (el, x, y) {
x = x || 0;
y = y || 0;
el.style.transform = 'translate3d('+ x + 'px,'+ y +'px,0)';
}
}
</script>
</body>
</html>19
收起
正在回答
2回答
同学你好，可以自己解决问题棒棒哒。继续加油。祝学习愉快~
盈西
2020-08-16 15:19:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<style>
body {
height: 2000px;
background-color: rgb(245, 220, 241);
}
.box {
width: 50px;
height: 50px;
background-color: #f00;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
var box = document.getElementById('box');
drag(box,{
x:true,
y:true
});
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
},
startPoint = {},
movePoint = {
x:0,
y:0
},
diffPoint= {},
isTouchMove = false,
bodyWidth = document.body.clientWidth,
bodyHeight = document.body.clientHeight,
elWidth = el.clientWidth,
elHeight = el.clientHeight;
el.addEventListener('touchstart', handleStart);
el.addEventListener('touchmove', handleMove);
el.addEventListener('touchend', handleEnd);
function handleStart (e) {
var touch = e.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pagY;
}
function handleMove (e) {
e.preventDefault();
isTouchMove = true;
var touch = e.changedTouches[0];
diffPoint.x = touch.pageX - startPoint.x;
diffPoint.y = touch.pageY - startPoint.y;
if (options.x) {
movePoint.x = diffPoint.x + curPoint.x;
movePoint.x = movePoint.x < -(bodyWidth-elWidth)/2 ? -(bodyWidth-elWidth)/2 : movePoint.x;
movePoint.x = movePoint.x > (bodyWidth-elWidth)/2 ? (bodyWidth-elWidth)/2 : movePoint.x;
}
if (options.y) {
movePoint.y = diffPoint.y + curPoint.y;
movePoint.y = movePoint.y < 0 ? 0 : movePoint.y;
movePoint.y = movePoint.y > bodyHeight - elHeight ? bodyHeight - elHeight : movePoint.y;
}
move(el,movePoint.x,movePoint.y);
}
function handleEnd (e) {
if (!isTouchMove) return;
var touch = e.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x;
curPoint.y += touch.pageY - startPoint.y;
isTouchMove = false;
}
function move (el, x, y) {
x = x || 0;
y = y || 0;
el.style.transform = 'translate3d('+ x + 'px,'+ y +'px,0)';
}
}
</script>
</body>
</html>老师垂直方向为什么动不了？
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星