JS实现拖拽功能

最新推荐文章于 2023-03-31 21:28:59 发布

fgf-2021

最新推荐文章于 2023-03-31 21:28:59 发布

阅读量170

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42303695/article/details/107280684

版权

html和css

<body>
	<div id="div1">
			
	</div>
</body>

#div1{width: 200px;height: 200px;background: red;position: absolute;}

JS代码

window.onload=function(){
	var oDiv=document.getElementById("div1");
	oDiv.onmousedown=function(ev){
		var e=ev||window.event;
		var x=e.clientX-oDiv.offsetLeft;
		var y=e.clientY-oDiv.offsetTop;
		document.onmousemove=function(ev){
			var e=ev||window.event;
			var l=e.clientX-x;
			var t=e.clientY-y;
						
			if(l<=0){
				l=0;
			}
			var windowWidth=document.documentElement.clientWidth||document.body.clientWidth;
			if(l>=windowWidth-oDiv.offsetWidth){
				l=windowWidth-oDiv.offsetWidth;
			}
			if(t<=0){
				t=0;
			}
			var windowHeight=document.documentElement.clientHeight||document.body.clientHeight;
			if(t>=windowHeight-oDiv.offsetHeight){
				t=windowHeight-oDiv.offsetHeight;
			}
			oDiv.style.left=l+"px";
			oDiv.style.top=t+"px";
		}
	}
	oDiv.onmouseup=function(){
		document.onmousemove=null;
	}
}

上述实现了禁止div块拖拽出界。
当鼠标按下时，要确定鼠标与被拖拽的块的相对位置。
然后鼠标移动时，应该时鼠标在document上移动，因为鼠标和div块是相对禁止的。
上述的l和t分别为div距离浏览器窗口的左边和上边的距离。

fgf-2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现拖拽功能

html和css<body> <div id="div1"> </div></body>#div1{width: 200px;height: 200px;background: red;position: absolute;}JS代码window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmousedown=function(ev){
复制链接

扫一扫