zoukankan      html  css  js  c++  java
  • Js一个拖拽的小例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.box{
    			 100px;
    			height: 100px;
    			background: #03ccbb;
    			position: absolute;
    			left: 0;
    			top: 0;
    		}
    	</style>
    </head>
    <body style="height: 3000px;">
    	<div class="box"></div>
    	
    	<script>
    		//获取盒子 
    		var ele = document.querySelector('.box');
     
    		// 移动最大宽高
    		var maxW = document.documentElement.clientWidth - ele.offsetWidth;
    		var maxH = document.documentElement.offsetHeight - ele.offsetHeight;
     
    		ele.onmousedown=function(e){//在元素上按下鼠标
    			e = e||window.event;
    			//记录鼠标按下时,到元素边缘的距离
    			var nX = e.offsetX;
    			var nY = e.offsetY;
     
    			document.onmousemove=function(e){//在document范围移动鼠标
    				e = e||window.event;
    				//计算元素的偏移量
    				var nLeft = e.pageX - nX;
    				var nTop = e.pageY - nY;
     
    				//限制元素的最大最小偏移量
    				nLeft = Math.min(maxW,Math.max(0,nLeft));
    				nTop = Math.min(maxH,Math.max(0,nTop));
     
     
    				ele.style.left = nLeft+"px";
    				ele.style.top = nTop+"px";
    			}
    		}
    		// 鼠标已开,move事件消失
    		document.onmouseup=function(){
    			document.onmousemove = null;
    		}
    	</script>
     
    </body>
    </html>
  • 相关阅读:
    Best Cow Fences_二分&&DP
    Palindrome_滚动数组&&DP
    Making the Grade_滚动数组&&dp
    BUY LOW, BUY LOWER_最长下降子序列
    Testing the CATCHER_DP
    Best Sequence_DFS&&KMp
    (Your)((Term)((Project)))
    [SOJ] 畅通工程续
    [SOJ] 商人的宣传
    [SOJ] 无路可逃?
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/11975273.html
Copyright © 2011-2022 走看看