有关iframe拖动问题，急!~

我用iframe作了个浮动页面，现在要实现在页面可以实现拖动浮动页面。
不知道哪位做过类似的功能吗？有没有相关代码。在此谢谢大家关照。

解决方案 »

  1.   

    光iframe比较难实现拖动浮动操作，但可以变换把iframe放在一个DIV层内，然后对DIV层进行增加拖动浮动操作，这样iframe就可以间接实现拖动浮动操作了。
      

  2.   

    不要求用Div去实现，能实现吗？
      

  3.   

    我觉得是不能的，我用过的都是div的，iframe只是模拟局部刷新的~~~
      

  4.   

    应该可以的，为什么我用cursor就出错呢？什么问题，谁用过。
      

  5.   

    我用js动态创建iframe，并可以实现拖动效果。
    <!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>Untitled Document</title>
    <script>
    function createIframe(){
    var frm = document.createElement("iframe");
    frm.id = 'ifrm';
    frm.name = 'ifrm';
    frm.style.position = 'absolute';
    frm.style.width = 480;
    frm.style.height = 180;
    frm.style.left = document.body.scrollLeft + event.clientX + 50;
    frm.style.top = document.body.scrollTop + event.clientY - 180;
    frm.style.display = 'none';
    frm.attachEvent("onload",addEvent);
    function addEvent(){
    var frm = event.srcElement;
    var id = event.srcElement.id;
    frm.contentWindow.document.drag = false;
    frm.contentWindow.document.initX = 0;
    frm.contentWindow.document.initY = 0;
    frm.contentWindow.document.posX = 0;
    frm.contentWindow.document.posY = 0;
    frm.contentWindow.document.getElementById("drag").frmid = id;
    frm.contentWindow.document.getElementById("drag").onmousedown = function(){
    var _event = this.document.parentWindow.event;
    var doc = this.document;
    var frm = parent.document.getElementById(this.frmid);
    doc.posX = _event.x;
    doc.posY = _event.y;
    doc.initX = parseInt(frm.style.left);
    doc.initY = parseInt(frm.style.top);
    doc.drag = true;
    status = (doc.initX+":"+_event.x);
    };
    frm.contentWindow.document.getElementById("drag").onmousemove = function(){
    var _event = this.document.parentWindow.event;
    var doc = this.document;
    var frm = parent.document.getElementById(this.frmid);
    if(doc.drag){
    frm.style.left = _event.x - doc.posX + doc.initX;
    frm.style.top = _event.y - doc.posY + doc.initY;
    doc.initX = parseInt(frm.style.left);
    doc.initY = parseInt(frm.style.top);
    status = (doc.initX+":"+_event.x);
    }
    };
    frm.contentWindow.document.getElementById("drag").onmouseup = function(){
    if(this.document.drag == true){
    this.document.drag = false;
    }
    };
    frm.contentWindow.document.getElementById("drag").onmouseout = function(){
    if(this.document.drag == true){
    this.document.drag = false;
    }
    }
    }
        document.body.appendChild(frm);
    }
    function  htmlEditor(){
    var frm = document.getElementById("ifrm");
    frm.style.display = '';
    var iframeTextContent = '';
    iframeTextContent += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
    iframeTextContent += '<html xmlns="http://www.w3.org/1999/xhtml">';
    iframeTextContent += '<head>';
    iframeTextContent += '<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
    iframeTextContent += '</head>';
    iframeTextContent += '<body style="position:absolute;color:#ffffff;background-color:#e5edf5">';
    iframeTextContent += '<table id="t" style="height:120px;width:435px;position:absolute;color:#ffffff;background-color:#FFFFFF;">';
    //iframeTextContent += '<table id="t">';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td id="drag" style="height:53px;color:#000000;font-weight:bold">Drag</td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td style="background-color:#FFFFFF; color:#000000;">Name</td>';
    iframeTextContent += '<td style="background-color:#FFFFFF; color:#000000;"><input type="text" value="" /></td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td style="background-color:#FFFFFF; color:#000000;">Email</td>';
    iframeTextContent += '<td style="background-color:#FFFFFF; color:#000000;"><input type="text" value="" /></td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td style="background-color:#FFFFFF; color:#000000;"><input type="button" id="btGo" value="Go" /></td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '</table>';
    iframeTextContent += '</body>';
    iframeTextContent += '</html>';
    frm.contentWindow.document.designMode = 'off';
    frm.contentWindow.document.open();
    frm.contentWindow.document.write(iframeTextContent);
    frm.contentWindow.document.close();

    var objGo = frm.contentWindow.document.getElementById("btGo");
    objGo.attachEvent("onclick",function(){HideIframe(frm);});
    }
    function HideIframe(frm){
    frm.style.display = 'none';
    }
    </script>
    </head><body onload="createIframe()">
    <input type="button" id="tt" name="tt" value="Click" onclick="htmlEditor()" />
    </body>
    </html>
      

  6.   

    现在可以实现拖动更流畅了。在div中添加z-index:10001;
    <!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>Untitled Document</title>
    <script>
    function createIframe(){
    var frm = document.createElement("iframe");
    frm.id = 'ifrm';
    frm.name = 'ifrm';
    frm.style.position = 'absolute';
    frm.style.width = "480px";
    frm.style.height = "180px";
    frm.style.left = document.body.scrollLeft + event.clientX + 50 + "px";
    frm.style.top = document.body.scrollTop + event.clientY - 180 + "px";
    frm.style.display = 'none';
    frm.style.border = "solid #33ddff  5px;";//00CCFF
    //frm.style.border = "solid #000 2px;";
    frm.attachEvent("onload",addEvent);
    function addEvent(){
    var frm = event.srcElement;
    var id = event.srcElement.id;
    var frmCont = frm.contentWindow.document;
    frmCont.drag = false;
    frmCont.initX = 0;
    frmCont.initY = 0;
    frmCont.posX = 0;
    frmCont.posY = 0;
    if(frmCont.getElementById("drag") != null){
    frmCont.getElementById("drag").frmid = id;
    frmCont.getElementById("drag").onmousedown = function(){
    var _event = this.document.parentWindow.event;
    var doc = this.document;
    var frm = parent.document.getElementById(this.frmid);
    doc.posX = _event .x;
    doc.posY = _event .y;
                    doc.initX = parseInt(frm.style.left);
    doc.initY = parseInt(frm.style.top);
    doc.drag = true;
    _event = null;
    };
    frmCont.getElementById("drag").onmousemove = function(){
    var _event = this.document.parentWindow.event;
    var doc = this.document;
    var frm = parent.document.getElementById(this.frmid);
    if(doc.drag){
    frm.style.left = _event.x - doc.posX + doc.initX;
    frm.style.top = _event.y - doc.posY + doc.initY;
    doc.initX = parseInt(frm.style.left);
    doc.initY = parseInt(frm.style.top);
    }
    _event = null;
    };
    frmCont.getElementById("drag").onmouseup = function(){
    var doc = this.document;
    doc.posX = 0;
    doc.posY = 0;
    doc.initX = 0;
    doc.initY = 0;
    if(doc.drag == true){
    doc.drag =false;
    }
    };
    frmCont.getElementById("drag").onmouseout = function(){
    var doc = this.document;
    doc.posX = 0;
    doc.posY = 0;
    doc.initX = 0;
    doc.initY = 0;
    if(doc.drag == true){
    doc.drag = false;
    }
    };
    }
    } document.body.appendChild(frm);
    }
    function  htmlEditor(){
    var frm = document.getElementById("ifrm");
    frm.style.display = '';
    var iframeTextContent = '';
    iframeTextContent += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
    iframeTextContent += '<html xmlns="http://www.w3.org/1999/xhtml">';
    iframeTextContent += '<head>';
    iframeTextContent += '<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
    iframeTextContent += '</head>';
    iframeTextContent += '<div id="drag" style="position:absolute;height:160px;width:460px;z-index:10001;top:0;">'
    iframeTextContent += '<body>';
    iframeTextContent += '<table id="t">';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td>Name</td>';
    iframeTextContent += '<td><input type="text" value="" /></td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td>Email</td>';
    iframeTextContent += '<td><input type="text" value="" /></td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '<tr>';
    iframeTextContent += '<td><input type="button" id="btGo" value="Go" /></td>';
    iframeTextContent += '</tr>';
    iframeTextContent += '</table>';
    iframeTextContent += '</body>';
    iframeTextContent += '</div>';
    iframeTextContent += '</html>';
    frm.contentWindow.document.designMode = 'off';
    frm.contentWindow.document.open();
    frm.contentWindow.document.write(iframeTextContent);
    frm.contentWindow.document.close();

    var objGo = frm.contentWindow.document.getElementById("btGo");
    objGo.attachEvent("onclick",function(){HideIframe(frm);});
    }
    function HideIframe(frm){
    frm.style.display = 'none';
    }
    </script>
    </head><body onload="createIframe()">
    <input type="button" id="tt" name="tt" value="Click" onclick="htmlEditor()" />
    </body>
    </html>