javascript 完美拖拽

在这里插入图片描述

<!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>
posted @ 2022-04-02 09:48  coderwcb  阅读(19)  评论(0)  编辑  收藏  举报