浮動底部 - 彼此之間的頂部

Question

嗨，每一個我想問問幫助與CSS - jQuery的拖放組織。 我熟悉將div放置到它們容器的底部（position：relative - > position：absolute; bottom：0;）。

目標：我想從存儲div中拖動項目，然後放下這些另一個div，並將這些項目從下到上垂直放置。就像建造塔樓（2D）或其他東西一樣。我如何將這些物品浮動到新容器的底部以及相互之間的頂部？

謝謝 - 賈尼

#drop { 
    height:300px; 
    background:#EDCCE9; 
} 
#drag { 
    margin-top:10px; 
    height:50px; 
    background:#B8D8E3; 
} 
#drag img { 
    display: inline-block; 
    margin-right:10px; 
} 
.temp { 
    display: block; 
} 

---

$('.item').draggable({ 
    containment: 'document', 
    revert: true, 
    helper: 'clone', 
    start: function() { 
     contents = $(this).html(); 
     currentValue = $(this).attr('value'); 
    } 
}); 
$('#drop').droppable({ 
    hoverClass: 'border', 
    accept: '.item', 
    drop: function (event, ui) { 
     $(this).append($(ui.draggable).clone()); 
     $('#drop .item').addClass('temp'); 
     $('.temp').removeClass('ui.draggable item'); 
     $(".temp").draggable({ 
      containment: 'document', 
      revert: true 
     }); 
    } 
}); 
$('#drag').droppable({ 
    hoverClass: 'border', 
    accept: '.temp', 
    drop: function (event, ui) { 
     $(ui.draggable).remove(); 
    } 
}); 

---

<div id="drop"></div> 
<div id="drag"> 
    <img src="blocks/a.png" width="50px" height="50px" class="item" /> 
    <img src="blocks/b.png" width="50px" height="50px" class="item" /> 
    <img src="blocks/c.png" width="50px" height="50px" class="item" /> 
    <img src="blocks/d.png" width="50px" height="50px" class="item" /> 
    <img src="blocks/e.png" width="50px" height="50px" class="item" /> 
    <img src="blocks/f.png" width="50px" height="50px" class="item" /> 
</div> 

Answer 1

不幸的是，沒有 「浮動：底部;」爲此類型的建築。你將不得不使用position：absolute;如你所述。

要，只要你想，你可以依靠的jQuery應用正確的bottom值做到這一點（你可以做到這一點我測量項目的數量已經在容器，然後每個的高度除以值項目，只要它們都是一樣大小的例子。）

要計算在堆棧中的項目，你可以使用.length()read here for more

OR

你可以通過使用：nth-​​child選擇器來使用CSS來做到這一點。問題在於它沒有在所有瀏覽器（我的意思是IE8及以下版本）中完全支持。有關詳細信息，請參閱can i use it。

使用這種方法，您只需創建一個列表，像這樣，與指定bottom值是增加：

li:nth-child(1) { 
    bottom:0; 
} 
li:nth-child(2) { 
    bottom:50px; 
}  
li:nth-child(3) { 
    bottom:100px; 
} 
... 

這個廣告nauseum。如果你知道你需要考慮多少項目，並且如果你有很多項目需要考慮，那麼只需要添加大量的CSS就可以解決問題。

---

如果它們不一樣的大小，那麼你將不得不使用jQuery的方法，而不是簡單地在棧計數的項目數已經，您將需要拉他們的高度和使用它來計算正確的bottom值