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.
精彩评论