最近项目里面一个移动一个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>
分享到:
相关推荐
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
WPF 滑动效果,鼠标拖动效果
鼠标拖动效果,很简单的脚本实现,可以做很多动态效果.
仿Google的一个鼠标拖动效果,Jquery实现的效果
jquery div页面图片浮动层鼠标拖动效果代码.zip
主要介绍了javascript实现简单的鼠标拖动效果,实例分析了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的朋友可以参考下
基于easyUI,鼠标可拖动div效果,1、拖着对象移动,原地不显示对象;2、拖着对象移动,原地还显示对象;3拖着对象移动,原地还显示对象,拖动时带说明。
javascript实现用鼠标拖动页面的效果,而不是传统意义上的拖动一个层的效果
delphi 实现鼠标拖动label,出现虚框,随鼠标移动的效果
主要介绍了JS实现超简单的鼠标拖动效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery编写HTML 鼠标可拖动层DIv 整理源代码。比网络上的其他鼠标拖动效果比较小巧,结构清楚,没有那么多花里胡哨的垃圾代码。
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动;定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好。 <!DOCTYPE ...
javascript实现鼠标拖动div的效果。。。
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
2.保证无毒 3.简单,方便,实用 4.实例可以自行改用 5.如有非法,本人无法律责任,由改动代码人负责! 6.需要更多本人作品,查找标签“朱建强” 7.请下载,杀毒后再使用!