js实现网页的拖拽。

最新推荐文章于 2024-08-20 15:15:10 发布

小飞侠十一

最新推荐文章于 2024-08-20 15:15:10 发布

阅读量170

点赞数

文章标签： html5 js

本文链接：https://blog.csdn.net/weixin_43182945/article/details/111762493

版权

<!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>