javascript - 无法从上到下交换 div。否则有效

Question

我无法让这段代码工作。从下到上，它似乎工作得非常好 - 也就是说，我拖动一个 div 元素，然后将其放在另一个元素之上，它就完成了它想要做的事情。然而，当我尝试将一个元素与其下面的另一个元素交换时，没有发生交换，这就是最让我困惑的地方。您能否解释一下为什么它不起作用？

let thing1 = document.getElementById("thing1");
let thing2 = document.getElementById("thing2");
let thing3 = document.getElementById("thing3");

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

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

function drop(ev) {

    ev.preventDefault();

    var thing = document.getElementById(ev.dataTransfer.getData("id"));
 
    var thingParent = thing.parentElement;
    
    var tgt = ev.currentTarget;
    console.log(thing)
    console.log(tgt)

    thingParent.replaceChild(thing, tgt);
    thingParent.appendChild(tgt);
    
}

thing1.addEventListener("drop", drop);
thing2.addEventListener("drop", drop);
thing3.addEventListener("drop", drop);

thing1.addEventListener("dragover", allowDrop);
thing2.addEventListener("dragover", allowDrop);
thing3.addEventListener("dragover", allowDrop);

thing1.addEventListener("dragstart", drag);
thing2.addEventListener("dragstart", drag);
thing3.addEventListener("dragstart", drag);

.thing {

  width: 100%;
  height: ;
  background: red;

}

.drag {
  
 background: red;
 height: 50px;
 margin: 10px;
 text-align: center;

}

#thing1 {
  background: yellow;
}

#thing2 {
  background: blue;
}

<div id="thing">
  <div id="thing1" class="drag" draggable="true">1</div>
  <div id ="thing2" class="drag" draggable="true">2</div>
  <div id ="thing3" class="drag" draggable="true">3</div>
</div>

Answer 1

您总是在页面底部附加要替换的 div，这意味着您永远无法真正替换底部的 div。我在您的代码中添加了超时，以向您展示发生了什么 here 。 (请注意，我添加了一个 removeChild 调用，但这会在操作 replaceChild 之前自动发生，因此我只是将其明确化，以增强您可视化正在发生的情况的能力。)

解决方案并不简单，因为选择在元素之前还是之后插入将取决于您来自下方还是上方。一种简单的解决方案是将这两个元素相互交换。这可以通过克隆一个来完成，如下所示:

function drop(ev) {

    ev.preventDefault();

    var thing = document.getElementById(ev.dataTransfer.getData("id"));

    var tgt = ev.currentTarget;

    if (thing && tgt) {
      var thingParent = thing.parentElement;
      var newTgt = tgt.cloneNode(true);
      addListeners(newTgt);
      thingParent.replaceChild(newTgt, thing)
      thingParent.replaceChild(thing, tgt);
    }

}

function addListeners(el) {
  el.addEventListener("drop", drop);
  el.addEventListener("dragover", allowDrop);
  el.addEventListener("dragstart", drag);
}

即使您决定实际上想要不同的行为，知道如何交换两个元素也应该为您提供获得所需行为的工具。