最近项目里面一个移动一个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>