鼠标拖拽特效

最新推荐文章于 2021-04-14 09:25:57 发布

javaScript小主

最新推荐文章于 2021-04-14 09:25:57 发布

阅读量349

点赞数 1

本文链接：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>

javaScript小主

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽特效

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标拖拽特效</title> </head> <div id="box" class="box"> <div id="drop" class="hd">注...
复制链接

扫一扫