user-interface - jQuery Masonry 和 UI 可排序

Question

有一个我正在开发的网站可以找到 here .这是一个摄影网站，我的客户要求我实现一些可以让她移动照片并改变它们出现顺序的东西。它们来自 MySQL 数据库并使用 jQuery Masonry 显示。

我立即想到了 jQuery UI Sortable，我一直在尝试实现它，但完全没有运气。
我怎样才能做到这一点？有人能指出我正确的方向吗？

提前致谢!

Answer 1

我正在为同样的问题苦苦挣扎，到目前为止，我的答案是使用 jquery 的可排序启动、停止、更改和排序事件更改类。像这样:

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

这是一个 working example和一个 JS Fiddle在这个问题上。这是一个开始。

然而，这不是一个“presto”解决方案，这个例子适用于旧版本的砌体，最新版本在实现它时有一些错误，因为“reload”方法被 layout() 和 reloadItems() 替换。
或者...您可以使用旧的砖石版本，如果它适合您的话。

或者，您可以使用 jQuery.Shapeshift() ，这基本上可以满足您的需求。