1oo分悬赏 高难度的div移动问题 请高手作答

<html> 
<head> 
<title>Drag</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
var Drag = { 
        //当前被drag的对象 
obj: null, 
//初始化 
init: function(id){ 
var o = document.getElementById(id); 
//当onmousedown开始拖拽 
o.onmousedown = Drag.start; 
}, 
start: function(e){ 
var o = Drag.obj = this; 
//lastMouseX，lastMouseY记录上次鼠标的位置 
o.lastMouseX = Drag.getEvent(e).x; 
o.lastMouseY = Drag.getEvent(e).y; 
//当onmousemove开始移动 
document.onmousemove = Drag.move; 
//当onmouseup终止拖拽 
document.onmouseup = Drag.end; 
}, 
move: function(e){ 
var o = Drag.obj; 
//dx, dy表示鼠标移动的距离 
var dx = Drag.getEvent(e).x - o.lastMouseX; 
var dy = Drag.getEvent(e).y - o.lastMouseY; 
//因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 
var left = parseInt(o.style.left) + dx ; 
var top = parseInt(o.style.top) + dy; 
o.style.left = left; 
o.style.top = top; 
o.lastMouseX = Drag.getEvent(e).x; 
o.lastMouseY = Drag.getEvent(e).y; 
}, 
end: function(e){ 
document.onmousemove = null; 
document.onMouseup = null; 
Drag.obj = null; 
}, 
//辅助函数，处理IE和FF不同的event模型 
getEvent: function(e){ 
                                if (typeof e == 'undefined'){ 
                                    e = window.event; 
                                } 
                                //alert(e.x?e.x : e.layerX); 
                                if(typeof e.x == 'undefined'){ 
                                    e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了 
                                } 
                                if(typeof e.y == 'undefined'){ 
                                    e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了 
                                } 
                                return e; 
                        } 
};         </script> 
</head> 
<body> 
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div> 
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div> 
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:800px; width:800px;">
<br>
<iframe src="http://www.upipp.cn/"></iframe>
</div> 
</body> 
<script type="text/javascript"> 
    //测试代码开始，使三个div具有drag and drop的能力。 
Drag.init('r'); 
Drag.init('g'); 
Drag.init('b'); 
        </script> 
</html>这是我在网上找到的拖拽代码   但是   当鼠标在拖拽时   移到iframe框架上   移动就自动暂停了   请问有什么办法让 框架不影响到div得移动

解决方案 »

  1.   

    我这里有一个解决方法
    后面有iframe的部分 参考一下
      

  2.   

    <html> 
    <head> 
    <title>Drag </title> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript"> 
    var Drag = {
        //当前被drag的对象
        obj: null,
        //初始化
        init: function(id){
            var o = document.getElementById(id);
            //当onmousedown开始拖拽
            o.onmousedown = Drag.start;
        }
        ,
        start: function(e){
            var o = Drag.obj = this;
            o.setCapture();
            o.lastMouseX = Drag.getEvent(e).x;
            o.lastMouseY = Drag.getEvent(e).y;
            document.onmousemove = Drag.move;
            document.onmouseup = Drag.end;
        }
        ,
        move: function(e){
            var o = Drag.obj;
            var dx = Drag.getEvent(e).x - o.lastMouseX;
            var dy = Drag.getEvent(e).y - o.lastMouseY;
            var left = parseInt(o.style.left) + dx ;
            var top = parseInt(o.style.top) + dy;
            o.style.left = left;
            o.style.top = top;
            o.lastMouseX = Drag.getEvent(e).x;
            o.lastMouseY = Drag.getEvent(e).y;
        }
        ,
        end: function(e){
            document.onmousemove = null;
            document.onmouseup = null;
            Drag.obj.releaseCapture();
            Drag.obj = null;
        }
        ,
        getEvent: function(e){
            if (typeof e == 'undefined'){
                e = window.event;
            }
            if(typeof e.x == 'undefined'){
                e.x = e.layerX;
            }
            if(typeof e.y == 'undefined'){
                e.y = e.layerY;
            }
            return e;
        }
    }
    ;</script> 
    </head> 
    <body> 
    <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"> </div> 
    <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"> </div> 
    <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:200px; width:300px;"> 
        <br> 
        <iframe src="http://www.baidu.com" width="300" height="200"></iframe> 
    </div> 
    </body> 
    <script type="text/javascript"> 
    //测试代码开始，使三个div具有drag and drop的能力。
    Drag.init('r');
    Drag.init('g');
    Drag.init('b');
    </script> 
    </html>
    本来就是这样的啊.什么叫暂停?你是说小块的被 框架覆盖了?
    移动到框架时,被覆盖了,你当然看不见框架后面的东西,但你把鼠标移动到框架另一边时,又出来了.只是你看不见
    你是不是想要它在框架层上面啊.设置zIndex就可以了.
      

  3.   

    <html> 
    <head> 
    <title>Drag </title> 
    <style type="text/css"></style> 
    <script type="text/javascript"> 
    var Drag = {
        //当前被drag的对象 
        obj: null,
        //初始化 
        init: function(id) {
            var o = document.getElementById(id);
            //当onmousedown开始拖拽 
            o.onmousedown = Drag.start;
        },
        start: function(e) {
            var o = Drag.obj = this;
            //lastMouseX，lastMouseY记录上次鼠标的位置 
            o.lastMouseX = Drag.getEvent(e).x;
            o.lastMouseY = Drag.getEvent(e).y;
    if(document.all){
    Drag.obj.setCapture();
    }
            //当onmousemove开始移动 
            document.onmousemove = Drag.move;
            //当onmouseup终止拖拽 
            document.onmouseup = Drag.end;
        },
        move: function(e) {
            var o = Drag.obj;
            //dx, dy表示鼠标移动的距离 
            var dx = Drag.getEvent(e).x - o.lastMouseX;
            var dy = Drag.getEvent(e).y - o.lastMouseY;
            //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 
            var left = parseInt(o.style.left) + dx;
            var top = parseInt(o.style.top) + dy;
            o.style.left = left;
            o.style.top = top;
            o.lastMouseX = Drag.getEvent(e).x;
            o.lastMouseY = Drag.getEvent(e).y;
        },
        end: function(e) {
            document.onmousemove = null;
            document.onMouseup = null;
            if(document.all){
    Drag.obj.releaseCapture();
    }
    Drag.obj = null;
        },
        //辅助函数，处理IE和FF不同的event模型 
        getEvent: function(e) {
            if (typeof e == 'undefined') {
                e = window.event;
            }
            //alert(e.x?e.x : e.layerX); 
            if (typeof e.x == 'undefined') {
                e.x = e.layerX; //复制了n遍，到了csdn就变成ee.x了 
            }
            if (typeof e.y == 'undefined') {
                e.y = e.layerY; //复制了n遍，到了csdn就变成ee.x了 
            }
            return e;
        }
    };
    </script> 
    </head> 
    <body> 
    <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px; z-index:1000;"> </div> 
    <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px; z-index:1000;"> </div> 
    <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:800px; width:800px;"> 
    <br> 
    <iframe src="http://www.upipp.cn/"> </iframe> 
    </div> 
    </body> 
    <script type="text/javascript"> 
        //测试代码开始，使三个div具有drag and drop的能力。 
    Drag.init('r'); 
    Drag.init('g'); 
    Drag.init('b'); 
    </script> 
    </html> 
      

  4.   

    <html> 
    <head> 
    <title>Drag </title> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript"> 
    var Drag = {
        zi:0,
        //当前被drag的对象
        obj: null,
        //初始化
        init: function(id){
            var o = document.getElementById(id);
            //当onmousedown开始拖拽
            o.onmousedown = Drag.start;
        }
        ,
        start: function(e){
            var o = Drag.obj = this;
            o.setCapture();
            Drag.zi=o.style.zIndex;
            o.lastMouseX = Drag.getEvent(e).x;
            o.lastMouseY = Drag.getEvent(e).y;
            o.style.zIndex=1000;
            document.onmousemove = Drag.move;
            document.onmouseup = Drag.up;
        }
        ,
        move: function(e){
            var o = Drag.obj;
            var dx = Drag.getEvent(e).x - o.lastMouseX;
            var dy = Drag.getEvent(e).y - o.lastMouseY;
            var left = parseInt(o.style.left) + dx ;
            var top = parseInt(o.style.top) + dy;
            o.style.left = left;
            o.style.top = top;
            o.lastMouseX = Drag.getEvent(e).x;
            o.lastMouseY = Drag.getEvent(e).y;
        }
        ,
        up: function(e){
            document.onmousemove = null;
            document.onmouseup = null;
            Drag.obj.style.zIndex=Drag.zi;
            Drag.obj.releaseCapture();
            Drag.obj = null;
        }
        ,
        getEvent: function(e){
            if (typeof e == 'undefined'){
                e = window.event;
            }
            if(typeof e.x == 'undefined'){
                e.x = e.layerX;
            }
            if(typeof e.y == 'undefined'){
                e.y = e.layerY;
            }
            return e;
        }
    }
    ;</script> 
    </head> 
    <body> 
    <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"> </div> 
    <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"> </div> 
    <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:200px; width:300px;"> 
        <br> 
        <iframe src="http://www.baidu.com" width="300" height="200"></iframe> 
    </div> 
    </body> 
    <script type="text/javascript"> 
    //测试代码开始，使三个div具有drag and drop的能力。
    Drag.init('r');
    Drag.init('g');
    Drag.init('b');
    </script> 
    </html>看看是不是你想要的.
      

  5.   

    同LS改变一下zIndex属性就好了，不过这段js在ff下drag时会乱跳LZ可以看一下 cloudgamer 的那片文章
      

  6.   

    <html> 
    <head> 
    <title>Drag </title> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript"> 
    var Drag = { 
            //当前被drag的对象 
    obj: null, 
    //初始化 
    init: function(id){ 
    var o = document.getElementById(id); 
    //当onmousedown开始拖拽 
    o.onmousedown = Drag.start; 
    }, 
    start: function(e){ 
    var o = Drag.obj = this; 
    //lastMouseX，lastMouseY记录上次鼠标的位置 
    o.lastMouseX = Drag.getEvent(e).x; 
    o.lastMouseY = Drag.getEvent(e).y; 
    //当onmousemove开始移动 
    document.onmousemove = Drag.move; 
    //当onmouseup终止拖拽 
    document.onmouseup = Drag.end; 
    }, 
    move: function(e){ 
    var o = Drag.obj; 
    //dx, dy表示鼠标移动的距离 
    var dx = Drag.getEvent(e).x - o.lastMouseX; 
    var dy = Drag.getEvent(e).y - o.lastMouseY; 
    //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 
    var left = parseInt(o.style.left) + dx ; 
    var top = parseInt(o.style.top) + dy; 
    o.style.left = left; 
    o.style.top = top; 
    o.lastMouseX = Drag.getEvent(e).x; 
    o.lastMouseY = Drag.getEvent(e).y; 
    }, 
    end: function(e){ 
    document.onmousemove = null; 
    document.onMouseup = null; 
    Drag.obj = null; 
    }, 
    //辅助函数，处理IE和FF不同的event模型 
    getEvent: function(e){ 
                                    if (typeof e == 'undefined'){ 
                                        e = window.event; 
                                    } 
                                    //alert(e.x?e.x : e.layerX); 
                                    if(typeof e.x == 'undefined'){ 
                                        e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了 
                                    } 
                                    if(typeof e.y == 'undefined'){ 
                                        e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了 
                                    } 
                                    return e; 
                            } 
    };         </script> 
    </head> 
    <body> 
    <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;z-index:2000;"> </div> 
    <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;z-index:2000;"> </div> 
    <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:800px; width:800px;z-index:1000;"> 
    <br> 
    <iframe src="http://www.upipp.cn/"> </iframe> 
    </div> 
    </body> 
    <script type="text/javascript"> 
        //测试代码开始，使三个div具有drag and drop的能力。 
    Drag.init('r'); 
    Drag.init('g'); 
    Drag.init('b'); 
            </script> 
    </html>