鼠标拖拽特效

本文链接： https://blog.csdn.net/qq_45683093/article/details/102511187
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标拖拽特效</title>
	</head>
	<div id="box" class="box">
		<div id="drop" class="hd">注册信息(可以拖拽)
			<span id="box_close">【关闭】</span>
		</div>
		<div class="bd"></div>
	</div>
	<body>
		<script>
			var box=document.getElementById('box');
			var drop=document.getElementById('drop');
			drop.onmousedown=function(event){
				var event=event || window.event;
				var pageX=event.pageX || event.clientX+document.documentElement.scrollLeft;
				var pageY=event.pageY || event.clientY+document.documentElement.scrollTop;
				var spaceX=pageX-box.offsetLeft;
				var spaceY=pageY-box.offsetTop;
				document.onmousemove=function(event){
					var event=event || window.event;
					var pageX=event.pageX || event.clientX+document.documentElement.scrollLeft;
					var pageY=event.pageY || event.clientY+document.documentElement.scrollTop;
					box.style.left=pageX-spaceX+'px';
					box.style.top=pageY-spaceY+'px';
					if(window.getSelection){
						window.getSelection().removeAllRanges();
					}else{
						document.selection.empty();
					}
				};
			};
			document.onmouseup=function(){
				document.onmousemove=null;
			};
		</script>
	</body>
</html>
猜你喜欢
