js拖拽且无Bug---js原生代码-CSDN博客

本文链接：https://blog.csdn.net/yhr0322/article/details/102694191

平民教程之js拖拽

再编写代码中很多地方用到拖拽事件
当然了现在网上也有很多的插件可以方便快捷的使用‘
但是就小编拾伍自己而言，个人还是觉得用原生的好一点，
原生js永远都是重中之重,只会用框架不懂底层原理永远达不到精通
所以在此献上一篇原生js的拖拽

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	.box{
		width: 200px;height: 200px;background-color: red;
		cursor: move;position: absolute;
		}
		</style>
		
	</head>
	<body>
		<div class="box" id="drag"></div>
		<script type="text/javascript">
			 window.onload = function(){
			
			 drag.onmousedown = function(event){
			var event = event || window.event; 
			var diffX = event.clientX - drag.offsetLeft;
			var diffY = event.clientY - drag.offsetTop;
			  if(typeof drag.setCapture !== 'undefined'){

                      drag.setCapture(); 

               }
			 
			  document.onmousemove = function(event){ 
			  	var event = event || window.event;
			  	var moveX = event.clientX - diffX;
			  	var moveY = event.clientY - diffY;
			  	if(moveX < 0){ 
			  		moveX = 0 
			  	}else if(moveX > window.innerWidth - drag.offsetWidth){
			  		moveX = window.innerWidth - drag.offsetWidth
			  	}                
			  	if(moveY < 0){
			  		moveY = 0 
			  	}else if(moveY > window.innerHeight - drag.offsetHeight){
			  		moveY =  window.innerHeight - drag.offsetHeight
			  	}                
			  	drag.style.left = moveX + 'px';
			  	drag.style.top = moveY + 'px'           
			  }            
			  document.onmouseup = function(event){
			  	this.onmousemove = null;
			  	this.onmouseup = null;
			  	//修复低版本ie bug 
			  	if(typeof drag.releaseCapture!='undefined'){
			  		drag.releaseCapture();
			  	}
			  	}
			  }
			  }

			
		</script>
	</body>
</html>