JavaScript拖动窗口_javascript窗口移动类文件-优快云博客

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/84964799

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			width:300px;
			height:300px;
			background:green;
			position:absolute;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script>
		var box = document.querySelector("#box");
		box.onmousedown = function(ev){
	　　　　 var e = ev || event;

	　　　　 var distanceX = e.clientX - box.offsetLeft;
	　　　　 var distanceY = e.clientY - box.offsetTop;
	        box.style.cursor = "move";

	　　　　 document.onmousemove = function(ev){
	            var e = ev || event;
	            var nx = e.clientX;
	            var ny = e.clientY;

	            var nl = nx - distanceX;
	            var nt = ny - distanceY;

	            var winWidth = window.innerWidth;
	            var winHeight = window.innerHeight;
	            if(nl <= 0)
	            {
	                nl = 0;
	            }
	            else if(nl >= (winWidth-box.offsetWidth))
	            {
	                nl = winWidth-box.offsetWidth
	            }
	            if(nt <= 0)
	            {
	                nt = 0;
	            }
	            else if (nt >= (winHeight-box.offsetHeight))
	            {
	                nt = winHeight-box.offsetHeight;
	            }
	　　　　　　 box.style.left = nl + 'px';
	　　　　　　 box.style.top = nt + 'px'; 
	　　　　};
	　　　　document.onmouseup = function(){
	            box.style.cursor = "default";
	　　　　　　document.onmousemove = null;
	　　　　　　document.onmouseup = null;
	　　　　}
	　　}
	</script>
</body>
</html>