Question

大家好我想问一下css的帮助 - jquery拖放-issue。我熟悉将div放在容器的底部（position：relative - ＆gt; position：absolute; bottom：0;）。

目标：我想要从存储div中拖动项目并删除另一个div并将这些项目从下到上垂直放置。就像建造塔（2D）或其他东西。如何将这些物品漂浮到新容器的底部并且彼此顶部？

谢谢 - Jani

#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值（您可以执行此操作测量容器中已有的项目数，然后< em>将此值除以每个项目的高度，前提是它们的大小与示例中的大小相同。）

要计算堆叠中的项目，您可以使用.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值

浮底 - 彼此顶部

1 个答案: