jQuery Masonry conflict with jQuery UI Sortable

Question

jQuery UI Sortable is not working when using Masonry. Any idea how to avoid this conflict? Any help would be appreciated.

Answer 1

I also had similar problem, but then i found a working Masonry&Sortable&resizable example:

http://tyler-designs.com/masonry-ui/

Not perfect, but it's a good starting point.

Answer 2

I think i had a similar problem.

I managed to fix it by simply recalling masonry within the code for setting up the sortable elements. (there might be a better way, i'm not sure?)

$(function() {
        $("#youritem").sortable({ opacity: 0.9, cursor: 'move', update: function() {
            var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
            $.post("dosomething.php", order, function(theResponse){
                       //you can see that i've re-called masonry once the sortable object has been moved                
                        $('#youritem').masonry({columnWidth: 200, itemSelector: 'youritem' });
            });                                                              
        }                                 
        });
    });

Hopefully that helps you out – if there is another way i'd also like to know.

Answer 3

Use gridster — it works like a charm and very intuitive