jQuery Masonry and UI Sortable

问题:

There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.

I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all. How can I achieve this? Can someone point me in the right direction, please?

Thanks in advance!

回答1:

I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:

$('#sortable').sortable({    
        start:  function(event, ui) {            
                 console.log(ui); 
            ui.item.removeClass('masonry');
            ui.item.parent().masonry('reloadItems')
                },
        change: function(event, ui) {
            ui.item.parent().masonry('reloadItems');
                },
        stop:   function(event, ui) { 
            ui.item.addClass('masonry');
            ui.item.parent().masonry('reloadItems');
});

Here is a working example and a JS Fiddle on the subject. It's a start.

However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems(). Or... you can use the old masonry versions, if it works for you.

Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.