鼠标的拖拽效果（html+css+js）

最新推荐文章于 2024-06-12 23:23:23 发布

vi_to

最新推荐文章于 2024-06-12 23:23:23 发布

阅读量1.8k

点赞数 2

文章标签： js css javascript html

本文链接：https://blog.csdn.net/vi_to/article/details/107992495

版权

效果如下：可以随意的移动这个窗口
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{margin: 0;}
			.box{
				width: 400px;height: 300px;border: 5px solid #eee;box-shadow: 2px 2px 2px 2px #666;
				position: absolute;top: 30%;left: 20%;
				
			}
			.hd{width: 100%;height: 25px;background-color: #7c9299;border-bottom: 1px solid #369;line-height: 25px;color: #fff;
	            cursor: move;		
			}
			#box_close{float: right;cursor: pointer;}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			<div id="drop" class="hd">
			     注册信息（可以拖拽）
				 <span id="box_close">
				 	【关闭】
				 </span>
				 
			</div>
			<div class="bd">
				
			</div>
		</div>
		
		<script type="text/javascript">
			//获取被拖动的盒子和拖动条
			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';
					
					window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
					
				};
			};
			
			
			document.onmouseup=function(){//释放鼠标按键是  取消盒子的移动
				document.onmousemove=null;
			};
		</script>
		
	</body>
</html>

vi_to

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
鼠标的拖拽效果（html+css+js）

效果如下：可以随意的移动这个窗口代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{margin: 0;} .box{ width: 400px;height: 300px;border: 5px solid #eee;box-sha
复制链接

扫一扫