简单的div拖动_document.documentelement.clientheight

本文链接：https://blog.youkuaiyun.com/b0303/article/details/115343372

前端页面中用到一些拖动的方式，简单的拖动的方式以jQuery为基准建立拖动。

代码直接就能使用。

直接上代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
	<title></title>
	<style>
	  div{
		  width:300px;
			height:400px;
			background-size:cover;
			position:absolute;
		}
	</style>
	<script>
	window.onload=function(){
	  var div= document.getElementsByTagName("div")[0];
		var distanceX,distanceY;
		//按下鼠标时，定义事件
		div.onmousedown =function(evt){
		  evt= evt||window.event;
		  isDrag= true;
			//console.log("isDrag:"+isDrag);
			//保存鼠标相对于div的偏移量
			distanceX= evt.offsetX;
			distanceY= evt.offsetY;
			// 按下鼠标时，定义document的移动事件
			document.onmousemove=function(evt){
				evt= evt||window.event;
				console.log(isDrag+" onmousemove");
					var divLeft= evt.clientX- distanceX;
					var divTop = evt.clientY- distanceY;
					var maxLeft= document.documentElement.clientWidth- div.offsetWidth;
					var maxTop = document.documentElement.clientHeight- div.offsetHeight;
					//console.log(document.documentElement.clientHeight);
					if(divLeft<0){
						divLeft=0;
					}
					if(divTop<0){
						divTop=0;
					}
					if(divLeft> maxLeft){
						divLeft= maxLeft;
					}
					if(divTop >maxTop){
						divTop= maxTop;
					}
					
					div.style.left= divLeft+"px";
					div.style.top = divTop+"px";
				 return false;
			}
			//按下鼠标时，定义document的鼠标弹起事件
			document.onmouseup= function(){
				document.onmousemove = null;
				document.onmouseup= null;
			}
			}
		
	}
	</script>
  </head>
  <body>
		 <div>这是展示拖动的位置里面根据自己的内容填写</div>
	</body>
</html>