可拖放區域的HTML5可拖動更改位置

Question

我正在使用可拖動的本機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> 

Answer 1

上課

.div1{ 
vertical-align: top;
}

希望這行得通。