jQuery：砌体 + 可排序的重新排序网格答案

【问题标题】：jQuery: Masonry + Sortable reorder gridjQuery：砌体 + 可排序的重新排序网格
【发布时间】：2012-07-21 11:55:56
【问题描述】：

我正在使用Masonry + jQuery Sortable 重新设计一个 3x3 网格，如下所示。

    $('#container').masonry({
        itemSelector: '.element',
        isResizable: true,
        columnWidth: 100
    })

用户可以对divs (1-4) 进行排序并给它们一个新的顺序。将div 1 拖到右上角的位置将重新排列网格，但与预期不同。新排序后会是这样的：

我想用这种方式添加事件停止/开始/更改到可排序...

change: function(event, ui) {
               ui.item.parent().masonry('reload');
        }

...将以2、3、4 上方和下方div 1 的方式重新排列网格。但它看起来像上面的屏幕截图。

有人可以帮我做这个预期的行为吗？我用 Masonry 错了吗？

编辑： 在reload 之后，DOM 返回div 2、3、1、4。我预计是 2、3、4、1。

TIA frgtv10

【问题讨论】：

【解决方案1】：

我认为，我不完全确定，砌体订单元素基于 DOM 元素的顺序。当用户拖动一个元素时，你会重新排序 DOM 吗？如果没有，当砌体重新加载时，顺序仍然会与之前的顺序相反。

【讨论】：

我也试过.masonry( 'reloadItems' )，这将Re-collects all item elements in their current order in the DOM。但这也行不通。你到底什么意思？重新排序后的 DOM 错了吗？
如何根据需要重新排序 DOM？
我也想过这个问题，但是div 1的宽度是300px，div 2,3,4的宽度是100px。这有点奇怪，因为当我给 div 1 的宽度设置为 200px 时，div 4 将适合在右上角。什么？ ://
您可以尝试使用列宽：columnWidth: function( containerWidth ) { return containerWidth / 3; }，或者尝试在放置事件时重新排序元素。
我正在使用 masonry('reload') 在事件“停止”和“更改”上重新排序元素，但没有成功。 ColumnWidth functin 不会有任何影响。