Question

我尝试在div1和div2标签内交换两个元素，但只有第一个替换函数正确执行，另一个元素未被交换

其中一个div一次被交换，但是当我尝试同时交换两个时它不会发生请帮助我 *

<head>
    <style type="text/css">
        #div1 {
            width:350px;
            height:70px;
            padding:10px;
            border:1px solid #aaaaaa;
        }
        #div2 {
            width:350px;
            height:70px;
            padding:10px;
            border:1px solid #aaaaaa;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            var child = ev.target;
            var parents = child.parentNode;
            ev.dataTransfer.setData("child1", child.id);
            ev.dataTransfer.setData("parent1", parents.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var childid1 = ev.dataTransfer.getData("child1");
            var parentid1 = ev.dataTransfer.getData("parent1");
            var parent1 = document.getElementById(parentid1);
            var c = ev.currentTarget.childNodes;
            var childid2 = c[1].id;
            parent1.replaceChild(c[1], document.getElementById(childid1));
            var parent2 = ev.currentTarget;
            parent2.removeChild(c[1]);
            parent2.appendChild(document.getElementById(childid1));
        }
    </script>
</head>

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </div>
    <br>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="236" height="49">
    </div>
</body>

Answer 1

我认为你的根本缺陷就是你不能满足这样的事实：当你第一次replaceChild时，你插入的图像会从它的父母中移除，所以它不再用第二个替换图像。

我发现你的变量名有些令人困惑，并且以更简单的方式重写了你的代码，如下所示：

function allowDrop (ev) {
   ev.preventDefault ();
}

function drag (ev) {
  ev.dataTransfer.setData ("src", ev.target.id);
}

function drop (ev) {
  ev.preventDefault ();
  var src = document.getElementById (ev.dataTransfer.getData ("src"));
  var srcParent = src.parentNode;
  var tgt = ev.currentTarget.firstElementChild;

  ev.currentTarget.replaceChild (src, tgt);
  srcParent.appendChild (tgt);
}

您可以在jsFiddle

测试此代码

使用javascript通过拖放交换div的子元素

1 个答案: