jQuery Masonry et UI Sortable

Question

Il y a ce site web que je suis en train de développer et qui peut être consulté à l'adresse suivante ici . Il s'agit d'un site web de photographie et ma cliente m'a demandé de mettre en place quelque chose qui lui permettrait de déplacer les photos et de changer l'ordre dans lequel elles apparaissent. Elles proviennent d'une base de données MySQL et sont affichées avec jQuery Masonry.

J'ai immédiatement pensé à jQuery UI Sortable, et j'ai essayé de le mettre en œuvre sans succès. Comment puis-je y parvenir ? Quelqu'un peut-il m'indiquer la bonne direction, s'il vous plaît ?

Merci d'avance !

Answer 1

Je suis confronté au même problème, jusqu'à présent ma réponse a été de changer de classe avec les événements de démarrage, d'arrêt, de changement et de tri de jquery. Comme cela :

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

Voici un exemple de travail et un JS Fiddle sur le sujet. C'est un début.

Cependant, ce n'est pas une solution 'presto', ces exemples fonctionnent avec les anciennes versions de Masonry, la dernière version a quelques bugs d'implémentation depuis que la méthode "reload" a été remplacée par layout() et reloadItems(). Ou... vous pouvez utiliser les anciennes versions de Masonry, si cela vous convient.

Vous pouvez également utiliser jQuery.Shapeshift() qui fait essentiellement ce que vous recherchez.