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

我正在使用可拖动的本机HTML5功能。

导致我出现问题的是，放置时，可放置元素（可放置可拖动区域-黄色DIV）正在更改位置。

我已经尝试过将可拖动元素的位置设为：absolute，但是随后可拖动元素重叠了。

任何想法如何解决这个问题？我想堆叠可拖动元素（蓝色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>

最佳答案

上课

.div1{
vertical-align: top;
}

希望这行得通。

关于javascript - 可拖放区域的HTML5可拖动更改位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43492867/