鼠标拖动效果

最近项目里面一个移动一个table的功能:

var $id = function (id) {
	return document.getElementById(id);
};
var dragF = {locked:false, lastObj:undefined, drag:function (obj) {
	$id(obj).onmousedown = function (e) {
		var e = e ? e : window.event;
		if (!window.event) {
			e.preventDefault();
		}
		/* 阻止标注浏览器下拖动a,img的默认事件 */
		dragF.locked = true;
		$id(obj).style.position = "absolute";
		$id(obj).style.zIndex = "100";
		if (dragF.lastObj && dragF.lastObj != $id(obj)) {
			/* 多元素拖动时候需要恢复上一次元素的状态 */
			dragF.lastObj.style.zIndex = "1";
		}
		dragF.lastObj = $id(obj);
		var tempX = $id(obj).offsetLeft;
		var tempY = $id(obj).offsetTop;
		dragF.x = e.clientX;
		dragF.y = e.clientY;
		document.onmousemove = function (e) {
			var e = e ? e : window.event;
			if (dragF.locked == false) {
				return false;
			}
			$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
			$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
			if (window.event) {
				e.returnValue = false;
			}
			/* 阻止ie下a,img的默认事件 */
		};
		document.onmouseup = function () {
			dragF.locked = false;
		};
	};
}};

 

 

使用方法：

<div id="menu" style="display:none" class="HIMENU" onmouseover="highlightie(event, 'menuitems');" onmouseout="lowlightie(event,'menuitems');" >
	        <ul style="display:none">
	            <li class="menuitems" onclick="javascript:_action(0)">模块样式(<u>C</u>)</li>
	            <li class="menuitems" onclick="javascript:_action(1)">删除模块(<u>D</u>)</li>
	            <li class="menuitems" onclick="javascript:_action(3)">模块模板(<u>E</u>)</li>
	        </ul>
</div>


<script>
var main_menu = document.getElementById("menu");
		main_menu.className = menuskin;
		try{document.body.onclick = hideAllMenu;/**/}catch(err){}
</script>