javascript 完美拖拽

Love The Way You Lie 2021-11-11 04:32 519阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>完美拖拽</title>
    		<style type="text/css">
    			html,
    			body { 
    				overflow: hidden;
    			}
    
    			body,
    			div,
    			h2,
    			p { 
    				margin: 0;
    				padding: 0;
    			}
     
    			body { 
    				color: #fff;
    				background: #000;
    				font: 12px/2 Arial;
    			}
    
    			p { 
    				padding: 0 10px;
    				margin-top: 10px;
    			}
    
    			span { 
    				color: #ff0;
    				padding-left: 5px;
    			}
    
    			#box { 
    				position: absolute;
    				width: 300px;
    				height: 150px;
    				background: #333;
    				border: 2px solid #ccc;
    				top: 50%;
    				left: 50%;
    				margin: -75px 0 0 -150px;
    			}
    
    			#box h2 { 
    				height: 25px;
    				cursor: move;			/* move 此光标指示某对象可被移动。 */
    				background: #222;
    				border-bottom: 2px solid #ccc;
    				text-align: right;
    				padding: 0 10px;
    			}
    			#box h2 a { 
    				color: #fff;
    				font: 12px/25px Arial;
    				text-decoration: none;
    				outline: none;
    			} 
    		</style>
    		<script type="text/javascript">
    			window.onload = function() { 
    				var oBox = document.getElementById("box");
    				var oH2 = oBox.getElementsByTagName("h2")[0];
    				var oA = oBox.getElementsByTagName("a")[0];
    				var aSpan = oBox.getElementsByTagName("span");
    				var disX = disY = 0;
    				var bDrag = false;
    				var aPos = [{ 
    					x: oBox.offsetLeft,
    					y: oBox.offsetTop
    				}]
    
    				//鼠标按下, 激活拖拽
    				oH2.onmousedown = function(event) { 
    					var event = event || window.event;
    					bDrag = true;
    					/* 鼠标相对于h2盒子的位置 */
    					disX = event.clientX - oBox.offsetLeft;
    					disY = event.clientY - oBox.offsetTop;
    
    
    					aPos.push({ 
    						x: oBox.offsetLeft,
    						y: oBox.offsetTop
    					})
    					// this.setCapture && this.setCapture();
    					/* setCapture这个是js自带的鼠标捕获事件， setCapture不可作用于键盘等其它事件，只能作用于鼠标事件。主要用于: onmouseover 与 onmouseout 事件。 setCapture该法是IE浏览器专有。 setCapture 有一个布尔值参数，用于设置是否捕获其子元素的鼠标事件。 当参数是ture时 ，当前元素会捕获其内的所有子元素的鼠标事件，即指定元素内的子元素不会触发鼠标事件，也就是当前元素内的子元素与当前元素外的元素一致。 　 　当参数为false时，当前元素不会捕获该其内的所有子元素的鼠标事件。容器内的对象能够正常地触发事件和取消冒泡。 setCapture()用于事件的锁定，对应的还有一个解锁事件方法 releaseCapture()方法，releaseCapture()可以为指定的元素解除事件锁定。它们俩必须成对使用。 setCapture()方法主要用于高级的拖动技术，这是因为在IE下，当我们在要拖动的元素上，在按下鼠标按钮然后拖动时，当拖动过快，或者是超出浏览器的文档窗口时， 拖动对象身上的onmousedown就会失效。在Chrome我们可以为doucment绑定onmouseout来判断是否发生这样的情况，但是IE下面却行不通，所以最好的解决办法就 时为要拖动的元素对象锁定鼠标事件，在拖动后在解除事件锁定。*/
    
    					return false
    				};
    
    				//拖拽开始
    				
    				document.onmousemove = function(event) { 
    					
    					 if (!bDrag) return;/* 不加的话不管点击不点击都会移动 ，如果bDrag为假，返回，不执行后面语句，防止直接执行*/
    			     
    				
    					var event = event || window.event;
    					var iL = event.clientX - disX;
    					var iT = event.clientY - disY;
    					var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
    					var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
    
    					iL = iL < 0 ? 0 : iL;
    					iL = iL > maxL ? maxL : iL;
    
    					iT = iT < 0 ? 0 : iT;
    					iT = iT > maxT ? maxT : iT;
    
    					oBox.style.marginTop = oBox.style.marginLeft = 0;
    					oBox.style.left = iL + "px";
    					oBox.style.top = iT + "px";
    
    					aPos.push({ 
    						x: iL,
    						y: iT
    					})
    
    					status();
    
    					return false
    				};
    
    				//鼠标释放, 结束拖拽
    				document.onmouseup = window.onblur = function() { 
    				
    					bDrag = false;
    					
    					oH2.releaseCapture && oH2.releaseCapture();
    					status()
    				};
    
    // //回放拖动轨迹
    				oA.onclick = function() { 
    					if (aPos.length == 1) return;
    					var timer = setInterval(function() { 
    						var oPos = aPos.pop();
    						oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
    					}, 30);
    
    					// this.focus = false; //去除链接虚线
    
    					return false
    				};
    // 
    				//阻止冒泡
    				oA.onmousedown = function(event) { 
    					(event || window.event).cancelBubble = true		/* stoppropagation */
    				};
    // 
    				//监听状态函数
    				function status() { 
    					aSpan[0].innerHTML = bDrag;
    					aSpan[1].innerHTML = oBox.offsetTop;
    					aSpan[2].innerHTML = oBox.offsetLeft
    				}
    
    				//初始调用
    				status()
    			};
    		</script>
    	</head>
    	<body>
    		<div id="box">
    			<h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    			<p><strong>Drag:</strong><span></span></p>
    			<p><strong>offsetTop:</strong><span></span></p>
    			<p><strong>offsetLeft:</strong><span></span></p>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211109/4b49062b4a584dc69f86f1efd2a4caf9.png