JS如何实现跨Frame拖拽？

楼主不会是托吧？
害我再注册了一个126的帐号。
根本不是跨frame的拖拽。
本来就是在一个frame中做的。
那个画面中就上下两个frame，
并且上面的frame高度为100%。
也就是说下面的frame高度为0，
是个隐藏的frame.
因此也就不是什么跨frame拖拽了。

解决方案 »

  1.   

    跨 frameset 的做法？我有个思路不知是否可行当发生选取时(onmousedown)，将这个选取的对象存到顶层的，然后监测 document.onmouseout 进行处理
      

  2.   

    可能我看错了啊，126的不是跨FRAME，可是我想实现跨FRAME的拖拽，你看看能不能有思路？
      

  3.   

    ommouse类事件不支持跨FRAME啊！！
      

  4.   

    我也是想了好久呀！
    做了好多的调查，终于想到了方法，
    其实拖拽实现起来不难。
    这个只要各个frame之前的配合就可以了。
    最大的困难还是怎么实现拖拽时对象移动的效果。
    也就是怎样把对象移出窗口或者frame.
    如果只是改变一下图标的话就比较简单了。
    想要感观上好像是把对象直接移动到别的FRAME上的话，
    就很困难了。
    不过好在IE下可以使用createPopup来实现。周未有时间把代码写出来。
      

  5.   

    楼主说的是类似google个性化首页的那功能吧，有空去下载  [浪曦][非原创][前沿科技]精通Javascript+jquery
    里面讲到了如何实现这功能，而且对学习和复习js都很有好处
      

  6.   

    我有个思路.点击要拖拽元素时,将其clone成一个新的元素,直接加到body下,绝对定位,在body中激活mousemove事件,跟随鼠标移动,再点击时,将元素插入新frame中.只是借助了一个类似飞行窗体的东西.变相的实现.
      

  7.   

    我刚刚试了一下，
    igoogle中也不能跨frame呀！
    只是一般的拖拽而已。
      

  8.   

    嘿嘿...最近说"窗口"说多了..不好意思.
    就是个在body下绝对定位的div啊~,里面包含想要拖动的元素~
      

  9.   

    OOH，
    div是没有办法拖出frame或者窗口的。
      

  10.   


    不好意思, 我刚才实践了一下, 确实不行. 我本想在主frame下建立div以为可以盖过下面的iframe. 结果不行. 顺便贴码(jquery)<html>
      <head>
        <title>test</title>
          <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
          <script type="text/javascript">
            function doMouseMove(e){
      var newLeft, newTop;
      newLeft=e.pageX;
      newTop=e.pageY;
      $("#fly").css({left:newLeft, top:newTop});
    }
    $(document).ready(function(){
      $(document.body).mousemove(doMouseMove);
    });
          </script>
      </head>
      <body>
        <div id="fly" style="position:absolute; left:800px; top:0px; z-index:200; background-color:black; width:200px; ight:200px;"></div>
        <iframe style="position:absolute; left:0px; top:0px; z-index:100" height="300px" width="500px" src="www.baidu.com" frameborder="0" scrolling="no"></iframe> 
      </body>
    </html>
      

  11.   


    把网页最外层弄成iframe width="100%" height="100%"
    里面层网页才是frameset这样实现起来就简单了
      

  12.   


    div确实可以盖住 iframe，
    你的程序没有盖住是因为你style里面写错了一些内容。iframe是比较特殊的一种frame，它是画面的一部分。
    因此div可以覆盖到上面。
    其它的frame就不可以了。
      

  13.   

    我有个思路,进行数据传递,使用clipboraddata或者event.datatransfer对象,将你拖拽对象的outerhtml存储在里面,拖拽结束时目标对象判断下clipboarddata或者datatransfer里的数据,再动态进行添加即可.
      

  14.   

    跨框架拖曳
    看看俺写的，IE7通过，暂不支持FF，有兴趣的自己改。两个文件，一个是Frameset.htm，一个是Frame.htm.*********************************************************************
    <!--Frameset.htm-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title> Frameset </title>
    </head>
    <frameset cols="200,*" frameBorder="Yes" frameSpacing="2">
        <frame src="Frame.htm">
        <frame src="Frame.htm">
    </frameset>
    </html>
    *********************************************************************
    <!--Frame.htm-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title> Frame </title>
    </head><body><div id="oDiv1" class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" style="position:absolute; left:-1000px; top:100px; width:100px; height:100px; background-color:#FFCC99; border:1px solid #FF0000; cursor:move;">跨框架拖曳</div>跨框架拖曳 <span id="oDiv2"></span><br><br><div id="oDiv3" style='display:none;'>
    查看效果：拖动DIV、拖动框架线（IE7测试通过）<br><br>
    本例程主要在于演示跨框架拖动的实现原理，暂未考虑兼容性，有兴趣的朋友自己改进。
    </div><script type="text/javascript">
    var deltaX=5; //水平校正量。设置为等于框架分割线所占宽度像素。
    var move=false,oX=0,oY=0,init=false;
    var LFrame,LDoc,LDiv, RFrame,RDoc,RDiv;window.onload=function(){
        if(typeof(oDiv1.style.pixelLeft)=='undefined'){
            document.write('您的浏览器不支持本演示例程正常运行，请在IE6,IE7运行。');
            document.close();
            return;
        }
        oDiv2.innerHTML=document.title=(window==parent.frames[0]?'Left':'Right');
        if(window==parent.frames[1]){ oDiv1.style.pixelLeft=100; oDiv3.style.display=''; }
        else{document.body.style.overflow='hidden';}
        LFrame=parent.frames[0];
        RFrame=parent.frames[1];
        if(LFrame){
            LDoc=LFrame.document;
            RDoc=RFrame.document;
            LDiv=LFrame.document.getElementById("oDiv1");
            RDiv=RFrame.document.getElementById("oDiv1");
        }
    }
    window.onresize=function(){
        LDiv.style.pixelLeft=RDiv.style.pixelLeft+LDoc.body.clientWidth+deltaX;
    }function StartDrag(obj)
    {
        if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
        {
        obj.setCapture();
        move=true;
        oX=event.offsetX; oY=event.offsetY;
        obj.style.background="#FFFF99";
        if(LDiv)LDiv.style.background="#FFFF99";
        if(RDiv)RDiv.style.background="#FFFF99";
        }
    }function Drag(obj)
    {
        if(move)
        {
            obj.style.pixelLeft=event.clientX-oX;
            obj.style.pixelTop=event.clientY-oY;
            if(window==RFrame){
            if(LDiv)LDiv.style.pixelLeft=obj.style.pixelLeft+LDoc.body.clientWidth+deltaX;
            if(LDiv)LDiv.style.pixelTop=event.clientY-oY;
            }else{
            if(RDiv)RDiv.style.pixelLeft=obj.style.pixelLeft-LDoc.body.clientWidth-deltaX;
            if(RDiv)RDiv.style.pixelTop=event.clientY-oY;
            }
        }
    }function StopDrag(obj)
    {
        if(move)
        {
        obj.releaseCapture();
        obj.style.background="#FFCC99";
        move=false;
        if(LDiv)LDiv.style.background="#FFCC99";
        if(RDiv)RDiv.style.background="#FFCC99";
        }
    }
    </script>
    </body>
    </html>
      

  15.   

    演示网址：
    http://www.cuixiping.com/jsdemo/CrossFrameDrag/Frameset.htm效果截图：
    http://www.cuixiping.com/jsdemo/CrossFrameDrag/ScreenShot.gif