如何在iframe上实现div拖拽？

兄弟你试试这个哦！！
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head><body>
<div class="drag" rel="drag" id="drag1" style="left:30px;top:10px;" onmousedown="dargit(this,event);">
TEST
</div>
<iframe src="about:blank" id="mainFrame" height="100%" width="50%"></iframe><script type="text/javascript">
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){
   if(divs[i].getAttribute("rel")=="drag"){
     divs[i].onmousemove=function(){
     thismove(this);
  }
   }
}function thismove(o){
    rw=parseInt(x)-parseInt(o.style.left);
    rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"=ı="+rh;
    if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;
if(rh<=20 && rw<180 )document.title=rw+"||ѡ||"+rh;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
      lx = e.clientX; ly = e.clientY;
      }else{
        lx = event.x; ly = event.y;
   }
if(document.all) thiso.setCapture();

st(o);

}document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){

var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
}
}document.onmouseup=function(){
     canDrg=false;
     if(document.all && thiso != null){
         thiso.releaseCapture();
      thiso = null;
   }
}
function set(obj){
     obj=obj.parentNode.parentNode;
     if(obj.getAttribute("rel"));

}
function st(o){var p = o.parentNode;
if(p.lastChild != o){
  p.appendChild(o);
}if(rh<=20 && rw>=180){
canDrg=false;
    window.status=rw+"|"+rh;
    if(p.firstChild == o) return;
    p.insertBefore(o, p.firstChild);
        }
}</script>
</body>
</html>

非常谢谢！ie下使用setCapture()就好用了但是firefox里面，在iframe上拖拽还是很卡用这个也没有效果，奇怪
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

<html>
<head>
<title>_xWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="http://www.51windows.Net">
<style type='text/css'>

</style>
<script language=JScript>

</script><script language='JScript'>

</script>
</head>
<base target="_blank">
<body onselectstart='return false' oncontextmenu='return false' >
<a onclick="ShowHide('1',null);return false;" href="">窗口1</a>
<a onclick="ShowHide('2',null);return false;" href="">窗口2</a>
<a onclick="ShowHide('3',null);return false;" href="">窗口3</a>
</body>
</html>

谢谢楼上朋友的代码但是在firefox里面不好用

我修改了一下dom-drag.js
将69-70行
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
改成 if(document.all)
{
o.setCapture();
o.onmousemove = Drag.drag;
}
else
{
window.onmousemove = Drag.drag;
for(i=0;i<window.frames.length;i++)
{
window.frames[i].onmousemove = Drag.drag;
}
}

楼上的星星：setCapture();和releaseCapture();在ie里面很好用有办法解决firefox的问题吗？让他在iframe上拖拽也不卡

先谢谢你！代码试过了，firefox的iframe里拖拽还是很卡另外没有释放鼠标事件我看一篇文章说firefox里可以这样锁定鼠标事件
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
但是并不好用

在firefox里运行这段代码，很明显的<html>
<script type="text/javascript" src="dom-drag.js"></script>
<iframe src="http://www.google.com/search?q=javascript" id="mainFrame" height="100%" width="80%"></iframe>
<div id="test" style="position:absolute; cursor:move">不能在IFRAME上拖拽</div>
<script>
Drag.init(document.getElementById("test"));
</script>
</html>

firefox错误控制台的信息
错误： uncaught exception: ???? Window.onmousemove ????

调试易

如何在iframe上实现div拖拽？

解决方案 »