jquery 可排序、浮动和清除

Question

所以我在这里有一个我想要做的快速模型 - http://antimac。 meloncreative.co.uk/labs/nth.php

实时版本是使用 div 内的缩略图完成的，这些缩略图具有不同的宽高比。因此宽度始终为 100px，但高度可以是任何值（或多或少）。

无论如何，正因为如此，并且使用浮动，有时它们不能很好地融入一条线上的 5 条线上，有些低于其他线，所以它们或多或少都在自己的线上，这使得它看起来很混乱。

那么...在排序和更新时如何做到这一点，clears总是能很好地使每行5个div？目前我正在做的事情

$('#reorder div.x:nth-child(5n)').addClass('clear green');

...并没有像我希望的那样工作

编辑：所以我认为问题出在 (5n) 部分，就像当我将第 1 项拖动到 5 和6、在拖动过程中，第一行缺少 2 个块，然后当我放下它时，第一行缺少 1 个块。这可能与我所拖动的克隆仍然在那里影响结果、想法有关？

Answer 1

我认为这还可以。只需确保在 x div 重新排序后添加绿色类即可。看看这个小提琴。 :eq 无法识别 n，请使用 :nth-child。

$('#reorder').children('div.x:nth-child(5n + 1)').addClass('clear green');

Answer 2

所以答案似乎是

$('#reorder').sortable({
        placeholder: 'placeholder',
        sort: function(event, ui) {
            $('#reorder div').removeClass('clear green');
            $('#reorder div.x:not(.ui-sortable-helper)').addClass('y');
            $('#reorder div.placeholder').addClass('y');
            $('#reorder div.y:nth-child(5n + 1)').addClass('clear green');
        },
        update: function(event, ui) {
            $('#reorder div.x').removeClass('y');
            $('#reorder div.x').removeClass('clear green');
            $('#reorder div.x:nth-child(5n + 1)').addClass('clear green');
        }
    });
    $('.reorder').disableSelection();
});

占位符和助手仍然存在问题，因为被拖动的内容仍然存在。