jQuery Masonry 和 UI 可排序 [英] jQuery Masonry and UI Sortable

问题描述

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

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.

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

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?

提前致谢！

推荐答案

我正在努力解决同样的问题，到目前为止，我的答案是使用 jquery 的可排序开始、停止、更改和排序事件来更改类.像这样:

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

这是一个工作示例和一个JS Fiddle 关于这个主题.这是一个开始.

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

然而，这不是一个presto"解决方案，这个例子适用于旧版本的砌体，最新版本有一些错误，因为reload"方法被 layout() 和 reloadItems() 取代.或者...如果适合您，您可以使用旧的砖石版本.

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.

或者，您可以使用 jQuery.Shapeshift()，它基本上可以满足您的需求正在寻找.

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

这篇关于jQuery Masonry 和 UI 可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！