浮动底部 - 彼此顶部

Posted 2023-02-25

【中文标题】浮动底部 - 彼此顶部

【英文标题】：Float bottom - top of each other

【发布时间】：2013-07-22 08:57:20

【问题描述】：

大家好，我想就 css - jquery 拖放问题寻求帮助。 我熟悉将 div 定位到其容器的底部（位置：相对 -> 位置：绝对；底部：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"   class="item" />
    <img src="blocks/b.png"   class="item" />
    <img src="blocks/c.png"   class="item" />
    <img src="blocks/d.png"   class="item" />
    <img src="blocks/e.png"   class="item" />
    <img src="blocks/f.png"   class="item" />
</div>

【问题讨论】：

不要附加丢弃的项目，而是尝试附加它们。这应该将它们作为第一项添加到 HTML 流中。然后你可以让块正常浮动（或者清除浮动的 100% 宽度）。我认为这应该可行。

感谢您的快速回答，但我不得不对我可能不清楚的介绍表示歉意。我认为我的问题更多的是 css - 问题。 jquery“追加”和“前置”之间的区别更多的是关于项目排序而不是浮动。为了清楚起见，我会附上我很棒的 Photoshop 插图以尽可能清晰。 kalliopaja.fi/example.png 所以，我的目标是让所有掉落的物品都漂浮在彼此的底部。 -贾尼

【参考方案1】：

遗憾的是，没有“float:bottom;”为此的类型构造。您将不得不使用 position:absolute;正如你所描述的。

要根据需要执行此操作，您可以依靠 jQuery 应用正确的 bottom 值（您可以这样做，我 测量容器中已有的项目数，然后 将此值除以每个项目的高度，前提是它们都与示例中的大小相同。）

要统计堆栈中的项目，您可以使用.length() read here for more

或

您可以通过使用 :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;

...

这令人作呕。那么问题在于，如果您知道需要考虑多少项目，并且如果您需要考虑很多项目，它只需要添加大量 CSS。

---

如果它们的大小不同，那么您将不得不使用 jQuery 方法，而不是简单地计算堆栈中已有项目的数量，您需要拉动它们的高度并使用它来计算正确的bottom 值

【讨论】：

非常感谢“robooneus”，你拯救了我的一天！只有一行代码 - 高效！

这里是工作代码： $('#drop').droppable( hoverClass: 'border', accept: '.item', drop: function(event, ui) ui.draggable. css('bottom', $('#drop img').length * 50); $(this).append($(ui.draggable).clone()); $('#drop .item').addClass ('temp'); $('.temp').removeClass('ui.draggable item'); $(".temp").draggable( contains: 'document', revert: true ); ) ;

很高兴为您提供帮助。如果它回答了您的问题，请随时接受答案。如果您需要更多说明，请告诉我，我会更新答案。