磁性吸附

最新推荐文章于 2022-11-26 11:46:20 发布

长岛冰茶子

最新推荐文章于 2022-11-26 11:46:20 发布

阅读量773

点赞数

分类专栏：事件对象文章标签：事件磁性吸附

本文链接：https://blog.csdn.net/Zhang_XiaoHeng/article/details/72770060

版权

事件对象专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>磁性吸附</title>
	<style>
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
		}
		img{
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oImg = document.getElementById("img1");
			drag( oDiv);
			drag( oImg);
			function drag(obj){
				obj .onmousedown = function(ev){
				var ev = ev||event;
				var disX = ev.clientX-this.offsetLeft;
				var disY = ev.clientY-this.offsetTop;
				if(obj.setCapture){
					obj.setCapture();
				}
				document.οnmοusemοve= function(ev){
					var ev = ev||event;
					var L = ev.clientX-disX;
					var T = ev.clientY-disY;
					if(L<100){
						L = 0;
					}else if(L>document.documentElement.clientWidth-obj.offsetWidth){
						L = document.documentElement.clientWidth-obj.offsetWidth;
					}
					if(T<100 ){
						T= 0;
					}else if(T>document.documentElement.clientHeight-obj.offsetHeight){
						T = document.documentElement.clientHeight-obj.offsetHeight;
					}//可看作拖拽限制的灵活运用
					obj.style.left = L +"px";
					obj.style.top= T +"px";
				}
				document.onmouseup = function(){
					document.onmousemove = null;
					if(obj.releaseCapture){
						obj.releaseCapture();
					}
				}
				return false;//取消事件的默认行为
			}
		}



			
		}
	</script>
</head>
<body>
	fdsgdfdsfsdf	
	<div id="div1"></div>
	<img id="img1" src="../img/cake2.jpg">
</body>
</html>

是