1

我尝试交换 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>

4

1 回答 1

7

我认为您的根本缺陷是您不满足这样一个事实，即当您执行第一个时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测试此代码

于 2013-05-28T07:25:12.793 回答