简单的拖拽-优快云博客

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个可拖拽的div元素。通过计算鼠标位置与div元素之间的相对位置来更新元素的位置，实现了基本的拖拽功能。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style>
			#dragdiv {position : absolute;left:0px;top:0px;border:solid 1px;height:100px;width:100px;}
		</style>
	</head>
	<body>
		<div id="dragdiv" onmousedown="dragstart(event , this)"></div>
		<script>
			var boxModel = !/msie/i.test(navigator.userAgent) || document.compatMode == "CSS1Compat";
			function getDocScroll(name) {
				var arr = name == 'Left' ? ['pageXOffset' , 'scrollLeft'] : ['pageYOffset' , 'scrollTop'];
				return window[arr[0]] || boxModel && document.documentElement[arr[1]] || document.body[arr[1]] ;
			}
			function getElementPos(el) {
				var left = el.offsetLeft , top = el.offsetTop ;
				while(el = el.offsetParant) {
					left += el.offsetLeft;
					top += el.offsetTop;
				}
				return {
					left : left ,
					top  : top
				};
			}
			var bDrag = false , eldrag = null ;
			function dragstart(e , el) {
				e = e || window.event;
				var p = getElementPos(el);
				var sl = getDocScroll('Left');
				var st = getDocScroll('Top');
				el.deltaX = e.clientX + sl - p.left;
				el.deltaY = e.clientY + st - p.top;
				bDrag = true;
				eldrag = el;
				if (eldrag.setCapture) eldrag.setCapture();
 				eldrag.onlosecapture = function() { document.onmouseup(); }
			}
			document.onmousemove = function(e) {
				if(!bDrag) return;
				e = e || window.event;
				var sl = getDocScroll('Left');
				var st = getDocScroll('Top');
				var x = sl + e.clientX - eldrag.deltaX;
				var y = st + e.clientY - eldrag.deltaY;
				eldrag.style.left = x + 'px';
				eldrag.style.top = y + 'px';
			};
			document.onmouseup = function() {
				if(!bDrag) return;
				if (eldrag.releaseCapture) eldrag.releaseCapture();
 				document.body.focus();
 				bDrag = false;
				eldrag = null;
			};
		</script>
	</body>
</html>