7

我想将一个小程序从一个div元素移动到另一个div元素而不重新加载它。我不想使用绝对定位。有没有办法做到这一点 ？

我试试这个，但它不工作：

<html>
    <head>
    <script type="text/javascript">
        function toDiv1() {
            var appletElt = document.getElementById('myApplet');
            document.getElementById('div1').appendChild(appletElt);
        }

        function toDiv2() {
            var appletElt = document.getElementById('myApplet');
            document.getElementById('div2').appendChild(appletElt);
        }
    </script>
    </head>
    <body>
        <div id ="myApplet">
            <applet width="200" height="200" 
                codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
                code="Smiley.class"
                name="Smiley">
            </applet>
        </div>
        <div id="div1"></div>
        <div id="div2"></div>
        <div>
            <button onclick="toDiv1()">toDiv1</button>
            <button onclick="toDiv2()">toDiv2</button>
        </div>
    </body>
</html>

你可以在这个小提琴上试试你的答案

@goldenparrot 提出的解决方案outerHTML适用于所有浏览器（至少是 Firefox ESR）。

正如@kritzikratzi 答案和@biziclop 答案中所述，firefox 存在已知问题，即在 firefox 中重新加载 iframe、flash 对象、插件。

我认为（但我不确定）唯一的解决方案是使用绝对定位（@cuzzea）。但是，我问这个问题是因为我想找到另一种方式（“我不想使用绝对定位”）。这就是为什么我不会给予任何答复。

感谢您的贡献。

4

4 回答 4

3

我不认为你正在寻找的是可能的，但如果你想使用定位，你可以试试这个：

http://fiddle.jshell.net/JRZXF/12/

HTML：

<div style="position:relative">
    <div>
        To test your code, make the smiley sad, then move it to another div. It must be still sad.    
    </div>

    <br>
    <div id ="myApplet">
        <applet width="200" height="200"
            codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
            code="Smiley.class"
            name="Smiley">
        </applet>
    </div>
    <div id="div1"></div>
    <br>
    <div id="div2"></div>
    <br>
    <div>
        <button id="button1">toDiv1</button>
        <button id="button2">toDiv2</button>
    </div> 
​&lt;/div>​​​​​​​​​​​​​​

Javascript：

function toDiv1() {
    $('#div1,#div2').empty();
    var el = $('#myApplet'),
        div = $('#div1'),
        clone_div = $('<div>');
    var width = 200,
        height = 200;
    clone_div.css({width:width,height:height});
    div.append(clone_div);
    el.css({
        position:'absolute'});
    el.css({
        left:clone_div.offset().left,
        top:clone_div.offset().top
    });
}

function toDiv2() {
    $('#div1,#div2').empty();
    var el = $('#myApplet'),
        div = $('#div2'),
        clone_div = $('<div>');
    var width = 200,
        height = 200;
    clone_div.css({width:width,height:height});
    div.append(clone_div);
    el.css({
        position:'absolute'});
    el.css({
        left:clone_div.offset().left,
        top:clone_div.offset().top
    });
}

$('#button1').click(toDiv1);
$('#button2').click(toDiv2);​

当然，这段代码可以改进很多，并且可以更好地工作。为了使这个示例正常工作，您需要所有嵌套的 div 具有相对位置。我还给了宽度和高度 200，但你可以让它变得动态，比如：

var width = el.width()

或者

var width = el.children('applet').attr('width');
于 2012-09-16T18:59:30.580 回答
2

现在，我想出了一个出色的（:D）解决方案，使用outerHTML：

function toDiv1() {

  var appletElt = document.getElementById('myApplet');

  var Div1 = document.getElementById('div1');

  var parts = Div1.outerHTML.split(">"+Div1.innerHTML+"<");

  // newHTML can also be appletElt.outerHTML
  var newHTML = Div1.innerHTML + appletElt.outerHTML;

  // Deleting Div1 because you will have multiple divs on page with id='div1'!
  Div1.parentNode.removeChild(Div1);

  appletElt.outerHTML = parts[0] + newHTML + parts[1];

}

重要提示：首先，您的applet标签也必须关闭。我的意思是：<applet></applet>

同样重要的是：

关于解决方案，您应该了解一些事情。

  1. 该解决方案仅在第一次有效。也就是说，您可以将其移动到 div1或div2。
  2. 如果您多次单击两个按钮或一个按钮，HTML将中断。
  3. 您必须通过将单词 ( && )替换为单词( && )来编写toDiv2()函数。Div1div1toDiv1()Div2div2

即使不是最好的解决方案，我也会发布此内容，因为如果您走在正确的轨道上，我相信您可以弄清楚如何使其即使在多次点击时也能正常工作。而且，在看到这个答案之后，你应该是。

编辑：

这是解决方案尝试做的基本事情：

appendChild 将创建一个新元素并附加它。如果创建了一个新元素，它就不是你想要的。

outerHTML 是 HTMLElement 的一个属性，您可以更改它。有关 outerHTML 的演示，请参阅此小提琴的工作原理。

于 2012-09-10T09:23:27.373 回答
1

可能是“完全不走运”的情况，谷歌搜索显示有许多听起来相关的浏览器错误：

不重新加载就无法在 dom 中移动 iframe：

无法在 dom 中移动插件

您最好的方法可能是使用 element.adoptNode(...) 和已经提到的 outerHtml。祝你好运 ：）

（很想测试，但由于 os xi 上的所有 java 混乱甚至无法运行 java 插件 atm）

于 2012-09-12T03:40:23.253 回答
1

我在IE8上尝试了以下

applet=document.getElementById('myapplet');
applet.outerHTML='<div id="my_div">'+applet.outerHTML+'</div>';

这会导致小程序停止、销毁、初始化并重新启动。所以这似乎表明outerHTML 不起作用。此外，Firefox 13 上的 outerHTML 将换行符作为返回的第一个字符。使用它来搜索由 outerHTML 返回的内容时要小心。

此外，gontard 的原始帖子似乎适用于 Firefox 13（不使用 outerHTML 或其他技巧）

于 2013-01-04T14:51:05.593 回答