javascript拖拽盒子移动的实现

刺骨的言语ヽ痛彻心扉 2022-07-16 09:07 229阅读 0赞

原理比较简单，可以参照之前的文章[javascript淘宝主图放大镜功能][javascript]帮助理解。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#box{
    				position: absolute;
    				left: 50px;
    				top: 50px;
    				width: 200px;
    				height: 200px;
    				background: red;
    			}
    			#box2{
    				position: relative;
    				box-sizing: border-box;
    				width: 800px;
    				height: 400px;
    				margin: 50px auto;
    				border: 1px solid gray;
    			}
    			
    		</style>
    		<script type="text/javascript">
    			window.onload = function (){
    				var box = document.getElementById('box');
    				var box2 = document.getElementById('box2');
    				var boxX = 0;
    				var boxY = 0;
    				box.onmousedown = function (ev){
    					var ev = ev||event;
    					boxX = ev.clientX - box.offsetLeft;
    					boxY = ev.clientY - box.offsetTop;
    					
    					var n = 10;//吸附参数
    					
    					if(box.setCapture){
    						document.onmousemove = mousemove;
    						document.onmouseup = mouseup;
    						box.setCapture();//IE中将其他地方的事件集中到box
    						
    					}
    					else{
    						document.onmousemove = mousemove;
    						document.onmouseup = mouseup;
    					}
    					
    					
    					function mousemove (ev){
    						var ev = ev||event;
    						var l = ev.clientX - boxX;
    						var t = ev.clientY - boxY;
    						//边缘吸附处理
    						if(l<n){
    							l = 0;
    						}
    						else if(l>box2.offsetWidth-box.offsetWidth-n){
    							l = box2.offsetWidth-box.offsetWidth-2;
    						}
    						if(t<n){
    							t = 0;
    						}
    						else if(t>box2.offsetHeight-box.offsetHeight-n){
    							t = box2.offsetHeight-box.offsetHeight-2;
    						}
    						box.style.left = l+"px";
    						box.style.top = t+"px";
    						
    						
    					}
    					function mouseup (){
    						this.onmousemove = null;
    						this.onmouseup = null;
    						if(this.releaseCapture)
    						{
    							this.releaseCapture();
    						}
    					}
    					return false;
    				}
    				
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box2">
    			<div id="box"></div>
    		</div>
    	</body>
    </html>

[javascript]: http://blog.csdn.net/sir1241/article/details/52528971