如何拖放但它不会消失，所以我们可以继续拖放它

Question

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}


<div class = “container”>
  <div class = “row” >
    <div class="col-md-1 center">
      <img src="https://i.stack.imgur.com/vxnww.jpg" style="height: 250px">
    </div>
    <div class="col-md-1">
      <div class="boxFirstCol" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
      <p><b>4s</b></p>
      <div class="box"> </div>
      <p><b>3s</b></p>
      <div class="box"> </div>
      <p><b>2s</b></p>
      <div class="box"> </div>
      <p><b>1s</b></p>
    </div>
  </div>
</div>

有更多的代码可以让它看起来像这样，但我能够将电子拖放到盒子内，然后盒子中的电子就会消失。

Answer 1

使用： -

list

您必须使用cloneNode（true）来克隆元素。