可放置区域的 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;
}

希望这行得通。