HTML5可拖动更改可放置区域的位置

Question

我正在使用可拖动的原生HTML5功能。

导致我出现问题的原因是可放置的元素（可拖放的区域 - 黄色DIV）在放下时会改变位置。

我已经尝试过的是使可拖动元素位置：绝对，但是可拖动元素重叠。

知道如何解决这个问题吗？我希望堆叠可拖动的元素（蓝色DIV），但当它们被拖入黄色DIVS时，黄色的必须保持其位置。

function StartDrag(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));
}

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

.div1{
  position:relative;
  padding: 15px;
  width: 300px;
  height: 300px;
  border: 2px solid black;
  background-color: yellow;
  margin: 15px;
  display:inline-block;
}

.div2{  
  
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background-color: blue;  
  display:inline-block;
  margin: 15px;
}

.div3{
  position:relative;
  margin: 15px;
  padding:15px;
  border: 2px solid black;
  background-color: gray;
  width: 600px;
  height: 400px;
}

<div id="div1" class="div1" ondrop="Drop(event)" ondragover="DragOver(event)">

  

</div>
<div id="div2" class="div1" ondrop="Drop(event)" ondragover="DragOver(event)"></div>




<div id="divDraggableElements" class="div3" ondrop="Drop(event)" ondragover="DragOver(event)">
  <div id="divD1" class="div2" draggable="true" ondragstart="StartDrag(event);"></div>
  <div id="divD2" class="div2" draggable="true" ondragstart="StartDrag(event);"></div>
  <div id="divD3" class="div2" draggable="true" ondragstart="StartDrag(event);"></div>
  
</div>

Answer 1

在课堂上给予

.div1{ 
vertical-align: top;
}

希望这有效。