Перетаскиваемые элементы для укладки в опускаемый контейнер (снизу вверх)

Question

Когда я перетаскиваю свои перетаскиваемые элементы (клоны) в контейнер для выпадения, они складываются сверху вниз, есть ли способ инвертировать это? Я попытался добавить относительную позицию к родительскому элементу и "position:absolute;bottom:0" для dragabble, но это не работает должным образом, так как тогда они все остаются в той же самой позиции, поэтому они не сложить друг на друга.

Код и пример 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

На основании этого ответа вы можете использовать display: table-cell а также vertical-align: bottom складывать дивы снизу. Обратите внимание, что с помощью float: right однако на контейнере сброса это не сработает. Вам нужен дополнительный окружающий элемент, как в этой скрипке

В качестве альтернативы вы можете использовать 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;
}

гибкая скрипка