將可拖動元素堆疊到可拖放容器中（底部到頂部）

Question

當我將可拖動元素（克隆）拖放到可拖放容器中時，它們從上到下堆疊，是否有反轉該方法的方法？我曾嘗試向父元素添加一個相對位置，並向可拖動元素添加「位置：絕對;底部：0」，但它不能正常工作，因爲它們都保持在完全相同的位置，所以它們不會堆疊在彼此的頂部。

的代碼和一個的jsfiddle例如：

https://jsfiddle.net/f3gzrtar/

HTML：

<div class="containtment"> 

    <div class="cube"> 
    </div> 

    <div class ="makeMeDroppable"> 
    </div> 

    </div> <!--containtment--> 

CSS：

.containtment { 
    height: 600px; 
    width: 600px; 
    border: 1px solid; 
} 

.cube { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    position: relative; 
    display: block; 
    margin: 1%; 
} 

.cube.ui-draggable-dragging { 
    background: green; 
    } 

.draggableHelper { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    position: relative; 
    display: block; 
    } 

.makeMeDroppable { 
    float: right; 
    width: 200px; 
    height: 300px; 
    border: 1px solid #999; 
    position: relative; 
    overflow: hidden; 
    } 

JS：

$(document).ready(function() { 

$('.cube').draggable({ 
    containment: "parent", 
    cursor: 'move', 
    helper: myHelper, 
}) 

function myHelper() { 
    return '<div class="draggableHelper"></div>'; 
} 

$('.makeMeDroppable').droppable({ 
    drop: handleDropEvent 
}); 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
$(".makeMeDroppable").append("<div class='cube'></div>") 
    } 
}); 

Answer 1

在此基礎上answer可以使用display: table-cell和vertical-align: bottom從底部疊加的div。請注意，在放置容器上使用float: right意味着這不起作用。您可通過執行需要像this fiddle

另外，您可以使用Flexbox的，如果你不關心的一些舊的瀏覽器的額外圍繞元件：

.makeMeDroppable { 
    display: flex; 
    float: none; 
    width: 200px; 
    height: 300px; 
    border: 1px solid #999; 
    position: relative; 
    overflow: hidden; 
    justify-content: flex-end; 
    flex-direction: column; 
} 

flex fiddle