鼠标拖动效果

最近项目里面一个移动一个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" οnmοuseοver="highlightie(event, 'menuitems');" οnmοuseοut="lowlightie(event,'menuitems');" >
	        <ul style="display:none">
	            <li class="menuitems" οnclick="javascript:_action(0)">模块样式(<u>C</u>)</li>
	            <li class="menuitems" οnclick="javascript:_action(1)">删除模块(<u>D</u>)</li>
	            <li class="menuitems" οnclick="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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值