js效果实现---简易拖拽

最新推荐文章于 2023-07-26 17:33:34 发布

qq_40800584

最新推荐文章于 2023-07-26 17:33:34 发布

阅读量191

点赞数

本文链接：https://blog.youkuaiyun.com/qq_40800584/article/details/80379965

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	
	#box{
		height: 200px;
		width: 200px;
		background-color: red;
		position: absolute;
		left: 0;
		top:0;
	}
</style>
<body>
	<p>22222222222222222222222222222222222222222222222</p>
	<div id="box"></div>

</body>
<script type="text/javascript">
	window.οnlοad= function(){
		var disx=0;
		var disy=0;
		var box=document.getElementById('box');
		if(document.setcapture){
					document.setcapture
				}
		box.οnmοusedοwn=function (e) {
			var ev=window.event ||e;
			//获取鼠标点击时相对窗口的位置和div相对窗口的位置，并计算出鼠标相对div的边框位置
			disx=ev.clientX-box.offsetLeft;
			disy=ev.clientY-box.offsetTop;

			document.οnmοusemοve=function(e){
				var ev=window.event || e;
				//通过计算的出div的left和top
				var boxL=ev.clientX-disx;
				var boxT=ev.clientY-disy;
				document.titl=boxT;
				box.style.left=boxL+'px';
				box.style.top=boxT+'px';
			}
			
			box.οnmοuseup=function(){
				document.οnmοusedοwn=null;
				document.οnmοusemοve=null;
				if(box.releasecapture){
					box.releasecapture;
				}
			}
			return false;//处理诡异兼容性
		}
		
	}
</script>
</html>