可以拖动的DIV

好久以前的了,质量不高。。直接上代码

function Tong_MoveDiv() {
	this.Move = function(Id, Evt, T) {
		if (Id == "") return;
		var o = document.getElementById(Id);
		if (!o) return;
		evt = Evt ? Evt : window.event;
		o.style.position = "absolute";
		o.style.zIndex = 200;
		var obj = evt.srcElement ? evt.srcElement : evt.target;
		var w = o.offsetWidth;
		var h = o.offsetHeight;
		var l = o.offsetLeft;
		var t = o.offsetTop;
		var div = document.createElement("DIV");
		document.body.appendChild(div);
		div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:" + w + "px;height:" + h + "px;top:" + t + "px;left:" + l + "px;position:absolute;background:#000";
		div.setAttribute("id", Id + "temp");
		if (T) {
			this.Move_OnlyMove(Id, evt);
		}
	}
	this.Move_OnlyMove = function(Id, Evt) {
		var o = document.getElementById(Id + "temp");
		if (!o) return;
		evt = Evt ? Evt : window.event;
		var relLeft = evt.clientX - o.offsetLeft;
		var relTop = evt.clientY - o.offsetTop;
		if (!window.captureEvents) {
			o.setCapture();
		} else {
			window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
		}
		document.onmousemove = function(e) {
			if (!o) return;
			e = e ? e : window.event;
			if (e.clientX - relLeft <= 0)
				o.style.left = 0 + "px";
			else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
				o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) + "px";
			else
				o.style.left = e.clientX - relLeft + "px";
			if (e.clientY - relTop <= 1)
				o.style.top = 1 + "px";
			else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
				o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) + "px";
			else
				o.style.top = e.clientY - relTop + "px";
		}
		document.onmouseup = function() {
			if (!o) return;
			if (!window.captureEvents)
				o.releaseCapture();
			else
				window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
			var o1 = document.getElementById(Id);
			if (!o1) return;
			var l0 = o.offsetLeft;
			var t0 = o.offsetTop;
			var l = o1.offsetLeft;
			var t = o1.offsetTop;
			MyMove.Move_e(Id, l0, t0, l, t);
			document.body.removeChild(o);
			o = null;
		}
	}
	this.Move_e = function(Id, l0, t0, l, t) {
		if (typeof(window["ct" + Id]) != "undefined") clearTimeout(window["ct" + Id]);
		var o = document.getElementById(Id);
		if (!o) return;
		var sl = st = 8;
		var s_l = Math.abs(l0 - l);
		var s_t = Math.abs(t0 - t);
		if (s_l - s_t > 0)
			if (s_t)
				sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
			else
				sl = 0;
		else
		if (s_l)
			st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
		else
			st = 0;
		if (l0 - l < 0) sl *= -1;
		if (t0 - t < 0) st *= -1;
		if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
		if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
		if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
		if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
		if (s_l == 0 && s_t == 0) return;
		if (Math.abs(l + sl - l0) < 2)
			o.style.left = l0 + "px";
		else
			o.style.left = l + sl + "px";
		if (Math.abs(t + st - t0) < 2)
			o.style.top = t0 + "px";
		else
			o.style.top = t + st + "px";
		window["ct" + Id] = window.setTimeout("MyMove.Move_e('" + Id + "', " + l0 + " , " + t0 + ", " + (l + sl) + ", " + (t + st) + ")", 1);
	}
}
var MyMove = new Tong_MoveDiv();
#movable {
	position: absolute;
	width: 130px;
	height: 100px;
	filter: alpha(Opacity=60, style=0);
	opacity: 0.6;
	padding: 3px;
	z-index: 5000;
	font-size: 9pt;
	border: 1px solid #0faead;
}

#movable ul {
	margin: 1px;
	padding: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	color: #000000;
	background-color: #0faead;
}

#movable li {
	height: 24px;
	padding: 1px;
	line-height: 24px;
	list-style: none;
}
<!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>可以拖动的DIV效果</title>
	</head>

	<body>
		<div id="movable">
			<div style="cursor:move;width:100%">标题标题</div>
			<ul>
				<li>
					内容1
				</li>
			</ul>
			<ul>
				<li>
					内容2
				</li>
			</ul>
			<ul>
				<li>
					内容3
				</li>
			</ul>
		</div>
	</body>

</html>