1

div1 と div2 タグ内の 2 つの要素を交換しようとしましたが、最初の置換関数のみが適切に実行され、他の要素は交換されません

  • 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