2

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!

Paul
  • 26,170
  • 12
  • 85
  • 119
Ricardo Jerónimo
  • 113
  • 1
  • 4
  • 12
  • 1
    You shouldn't just post links to your site. You should put the relevant code in your question. Plus you need to demonstrate knowledge of the question being asked... what issue are you having with jQuery UI sortable? – dezman Aug 19 '13 at 23:22
  • Well, I can't sort out the elements, only move them around. The code is this script here: http://www.mrclay.org/2013/06/05/simpler-masonry-sortable-working-together/ But I also need to be able to order them in the database and I have no ideia how :/ I apologise for the lack of knowledge... – Ricardo Jerónimo Aug 19 '13 at 23:27
  • 3
    You might want to look at packery http://packery.metafizzy.co. It's basically masonry with sortable built in. – Barbara Laird Aug 19 '13 at 23:36
  • I agree with @watson. The website to which you refer doesn't exist anymore, so where this issue could have helped me, I'm now still in the dark. – Francois Botha Sep 09 '14 at 10:01

1 Answers1

3

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.

Ryoku
  • 792
  • 1
  • 5
  • 18
  • 1
    This was not enough for me. I had to add "$container.masonry()", or "msnry.layout()" in my case, after the "reloadItems" call to refresh the view. – Sander Jan 14 '15 at 15:10
  • Same for me as what Sander said. ui.item.parent().masonry('reloadItems'); By itself does nothing for me. – stef Apr 20 '15 at 13:22