javascript之div的拖拽

make sense

于 2018-11-08 20:38:44 发布

阅读量132

点赞数

分类专栏： js小实例

本文链接：https://blog.youkuaiyun.com/baidu_41861751/article/details/83867904

版权

js小实例专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		<script>
			window.onload = function(){
			var box1 = document.getElementById("box1");
			  //为鼠标绑定一个按下事件
			  box1.onmousedown = function(event){
			  	 	event = event||window.event;
			  	 	var ol = event.clientX - box1.offsetLeft;
			  	 	var ot = event.clientY - box1.offsetTop;
			  	
			  	
			  	
			    document.onmousemove = function(event){
				  	  	event = event||window.event;
				  	  	var x = event.clientX-ol;
				  	  	var y = event.clientY-ot;
				  	  	//修改box的位置
				  	  	box1.style.left = x+"px";
				  	  	box1.style.top = y+"px";
			  	};
			  };
			 document.onmouseup = function(){
			  	 //取消事件     在原地 
			  	  document.onmousemove = null;
			  	  document.onmouseup;
			  }
			};      
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>