1

大家好，我想就 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" 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>
4

1 回答 1

0

可悲的是，没有“浮动：底部；” 为此的类型构造。您将不得不使用 position:absolute; 正如你所描述的。

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

要计算堆栈中的项目，您可以使用.length() read here 了解更多信息

或者

您可以使用 :nth-child 选择器仅使用 CSS 执行此操作。问题在于，并非所有浏览器都完全支持它（我的意思是 IE8 及以下版本）请参阅我可以使用它以获取详细信息。

使用这种方法，您只需像这样创建一个列表，其中指定的bottom值会增加：

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

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

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

于 2013-07-22T12:54:22.963 回答