开发者

jquery sortable, floats, and clears

So I have a quick mockup here of what I am trying to do - http://antimac.meloncreative.co.uk/labs/nth.php

The live version is done using thumbnails inside the divs, and these thumbnails are of various aspect ratios. So the width is always 100px, but the height can be whatever (more or less).

Anyways, because of this, and using float, sometimes they dont nicely fit into 5 on a line, with some going b开发者_如何转开发elow others so they are more or less on their own line, which makes it look a mess.

So... how do I make it when sorting, and when updated, the clears will always nicely make 5 divs per row? Currently the bit where I am doing

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

... isnt working as I'd hoped

Edit: So I think the problem lies in the (5n) part, as when I drag say item 1, between 5 and 6, during the drag there are 2 blocks missing from the first row, then when I drop it, there is 1 missing from the first row. This possibly has something to do with the clone of the one I am dragging still being there slewing the results, ideas?


I think this is okay. just make sure adding class green after x divs have reordered. Look this fiddle. :eq doesn't recognize n, use :nth-child.

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


So the answer seemed to be

$('#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();
});

It was having issues with placeholders and also the helper that was still in place from what was being dragged around.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜