HTML5可拖動區域的可拖動位置變化

Question

我使用可拖動的本地HTML5功能。

是什麼導致我的問題是droppable元素（draggable可以放置的區域 - 黃色DIVs）在放置時正在改變位置。

我已經試過的是讓可拖動的元素位置：絕對，但然後可拖動元素重疊。

任何想法如何解決這個問題？我想有可拖動的元素（藍色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; 
} 

希望這個作品。