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

我正在使用Masonry + jQuery Sortable重新设计一个3x3网格，您可以在下面看到。jQuery：砌体+可排序的重新排序网格

enter image description here

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

用户能够在div S（1-4）进行排序，并给他们一个新的秩序。拖动div 1到右上角的位置将重新排列网格，但不是如预期的那样。排序它新的之后，它看起来就像这样：

enter image description here

我想用添加事件启动/停止/改变可排序这样...

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

...将重新排序网格的方式2,3,4顶部，并低于div 1.但它看起来像上面的截图。

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

编辑： reload后DOM返回div 2,3，1，4 我预期2，3，4，1

TIA frgtv10

2012-07-23 frgtv10

我想，我不完全确定，基于DOM元素的顺序的砌体订单元素。当用户拖动一个元素时，你是否重新排序DOM？如果没有，当石匠重新加载时，该命令仍然会颠倒前一个。

2012-07-23 09:08:25 bingjie2680

我也尝试过'.masonry（'reloadItems'）'，这将'重新收集DOM中当前顺序的所有项目元素。但是这也行不通。你到底什么意思？重新排序后，DOM是否错误？ – frgtv10 2012-07-23 09:11:57

如何根据需要重新排序DOM？ – frgtv10 2012-07-23 09:19:07

div 1的宽度是多少？所有的div都有相同的宽度？ – bingjie2680 2012-07-23 09:43:58

回答