<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的拖拽</title>
<style>
#box{width: 100px;height: 100px;background: blue;position: absolute;}
.cont{height: 20px;background: pink;text-align: center;cursor: move;}
/* cursor: move;设置鼠标箭头进入ocont时变为十字箭头 */
</style>
</head>
<body>
<div id="box">
<div class="cont">标题</div>
</div>
</body>
<script>
var obox = document.getElementById("box");
var ocont = document.querySelector(".cont");
//提前获得浏览器的宽高，以便下面边界限定的设置
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
ocont.onmousedown=function(eve){
//按下的事件对象
var e1 = eve || window.event;
//document代替obox：利用事件冒泡，拖拽obox在document上移动，obox会紧跟鼠标，解决obox跟丢鼠标。
document.onmousemove=function(eve){
//移动的事件对象
var e2 = eve || window.event;
//提前计算obox的left和top，并保存到变量，方便下边的边界限定
var l = e2.clientX - e1.offsetX;
var t = e2.clientY - e1.offsetY;
if(l<0){l=0};//左边边界限定
if(t<0){t=0};//上边边界限定
if(l>clientW-obox.offsetWidth){l = clientW-obox.offsetWidth;};//右边边界限定
if(t>clientH-obox.offsetHeight){t = clientH-obox.offsetHeight;};//下边边界限定
//将处理后的left和top设置给元素
obox.style.left = l + "px";
obox.style.top = t + "px";
}
//document代替obox：利用事件冒泡,解决：当鼠标在高频甩动，obox跟丢一瞬间时，鼠标在document上抬起，obox依然跟着鼠标。所以替代后，在document抬起，obox不会再紧跟鼠标。
document.onmouseup=function(){
document.onmousemove = null;
//解决onmouseup占内存的问题。
document.onmouseup = null;
}
//return false;//可以解决快速拽动时，选中标题，标题被拽动。但最好用下方的代码解决。
e1.preventDefault();//解决快速拽动时，选中标题，标题被拽动。
}
</script>
</html>
118
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
