当前位置：首页 → 问答吧 → 【求救】如何让多个层都可以拖动，目前只有1个层可以拖动。闷ING。。

【求救】如何让多个层都可以拖动，目前只有1个层可以拖动。闷ING。。

时间：2010-05-11

来源：互联网

代码如下：

想把其弄成多个层都可以拖动的形式，可惜小弟不才，弄了N久，无效。。

故求助，望各位兄弟帮忙哈~ 谢过~

在线等。。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DOM_text01</title> <style type="text/css"> body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8; } a.od:hover{ background:#EEE; } a.od:active{ background:#EEE; } #fd{ width:500px; height:200px; background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:100px; top:0px; cursor:move; float:left; } #fd1{ width:500px; height:200px; background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:600px; top:200px; cursor:move; float:left; } .content{ padding:10px; } </style> </head> <body> <div id="fd" style="display:block;filter:alpha(opacity=100);opacity:1;"> <div class="content">移动层</div> </div> <div id="fd1" style="display:block;filter:alpha(opacity=100);opacity:1;"> <div class="content">移动层</div> </div> <script type="text/javascript"> function x(id){ var od = document.getElementById(id); var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ? true : false; document.onmousedown = function(e){ var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mouseD = true; } } document.onmouseup = function(){ mouseD = false; odrag = ""; if(isIE) { od.releaseCapture(); od.filters.alpha.opacity = 100; } else { window.releaseEvents(od.MOUSEMOVE); od.style.opacity = 1; } } //function readyMove(e){ od.onmousedown = function(e){ odrag = this; var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if(isIE) { od.setCapture(); od.filters.alpha.opacity = 50; } else { window.captureEvents(Event.MOUSEMOVE); od.style.opacity = 0.5; } //alert(mx); //alert(my); } } document.onmousemove = function(e){ var e = e ? e : event; //alert(mrx); //alert(e.button); if(mouseD==true && odrag) { var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt(od.style.left) +mrx + "px"; od.style.top = parseInt(od.style.top) + mry + "px"; mx = e.clientX; my = e.clientY; } } } x('fd'); x('fd1') </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: lslglb 发布时间: 2010-05-11

继续期待大牛出现

作者: lslglb 发布时间: 2010-05-12

你可以搜一下，这种效果有很多

作者: ckoog 发布时间: 2010-05-12