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就此主题而言。这是一个开始。

但是，这不是一个“急速”解决方案，这个示例适用于旧版本的砌体，最新版本在实现它时存在一些错误，因为“重新加载”方法被替换为layout()和reloadItems()。 或者...您可以使用旧的砌体版本，如果它适合您。

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