您好,欢迎访问一九零五行业门户网

javascript如何实现div模块用鼠标拖动实例代码详解

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模块用鼠标拖动实例代码详解的详细内容。
其它类似信息

推荐信息