document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素;
event.button的值:0没按键 1按左键 2按右键 3按左和右键 4按中间键 5按左和中间键 6按右和中间键 7按所有的键
下面是实现代码,模仿window,并且让它可以盖住select
<!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>
<title>测试可动p</title>
<script language='javascript' type='text/javascript'>
var offset_x;
var offset_y;
function milan_startmove(oevent,p_id)
{
var whichbutton;
if(document.all&&oevent.button==1) whichbutton=true;
else { if(oevent.button==0)whichbutton=true;}
if(whichbutton)
{
var op=p_id;
offset_x=parseint(oevent.clientx-op.offsetleft);
offset_y=parseint(oevent.clienty-op.offsettop);
document.documentelement.onmousemove=function(mevent)
{
var eevent;
if(document.all) eevent=event;
else{eevent=mevent;}
var op=p_id;
var x=eevent.clientx-offset_x;
var y=eevent.clienty-offset_y;
op.style.left=(x)+"px";
op.style.top=(y)+"px";
var d_op=document.getelementbyid("disable_"+op.id);
d_op.style.left=(x)+"px";
d_op.style.top=(y)+"px";
}
}
}
function milan_stopmove(oevent){document.documentelement.onmousemove=null; }
function p_close(o)
{var op=o; op.style.display="none";var d_op=document.getelementbyid("disable_"+o.id);d_op.style.display="none";}
</script>
</head>
<body>
<p id="op" style="position:absolute;width:100px;height:60px;border:1px solid silver;left:100px;top:100px;z-index:9999;">
<p id="move" onmousedown="milan_startmove(event,this.parentnode)" onmouseup="milan_stopmove(event)"
style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;">
<p onclick="p_close(this.parentnode.parentnode)" style="float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:white;font-size:15px;">x</p>
</p>
<span>测试一下</span>
</p>
<p id="disable_op" style="position:absolute;left:100px;top:100px;width:100px; height:60px; z-index:9998;filter:alpha(opacity=50);";>
<iframe src="about:blank" name="hiddeniframe" width="100%" frameborder="0" height="60px" title="遮盖层"></iframe></p>
<select name="listhead1$dropdownlist3" id="listhead1_dropdownlist3">
<option selected="selected" value=""></option>
<option value="2">3333</option>
<option value="6">1111</option>
<option value="b">222</option>
</select>
</body>
</html>
现在这个可拖动的p是不是好很多了?不用担心select了。之前放出来的只能在ie下正常工作,主要是用了parentelement,现在把它换成parentnode,调整了css样式,这样在ff下也能正常运行了。
以上就是javascript如何实现div模块用鼠标拖动实例代码详解的详细内容。