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

问题描述

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

我立即想到了jQuery UI Sortable，我一直试图在绝对没有运气的情况下实现它所有。
我怎样才能做到这一点？有人可以指点我的方向吗？

预先感谢！

解决方案

我正在努力解决同样的问题，到目前为止我的答案是使用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'）; 
}）; 
  

这是工作示例和 JS小提琴学科。这是一个开始。然而，这不是一个'presto'解决方案，这个例子适用于较老的石匠版本，最新版本有一些错误实施，因为reload方法被layout（）和reloadItems（）所取代。
或...您可以使用旧砖石版本，如果它适用于您。

或者，您可以使用 jQuery.Shapeshift（），它基本上满足您的要求。

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!

解决方案

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.

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