以编程方式重新排序或移动 Draggable + Packery (Masonry) 中的元素答案

【问题标题】：Programmatically reorder or move elements in Draggable + Packery (Masonry)以编程方式重新排序或移动 Draggable + Packery (Masonry) 中的元素
【发布时间】：2015-05-23 06:06:36
【问题描述】：

这是一个小提琴：http://jsfiddle.net/bortao/00uvL60c/1/

当我按下“向左移动”/“向右移动”时，我想向左/向右发送块。我通过使用 el.insertBefore(el.prev()) / el.insertAfter(el.next()) 将其重新插入到 dom 结构上来做到这一点，但这不起作用，因为它保留了 left / top 坐标，并且如果有，也不要触摸包装内部结构任何。

如果我拖动块，它会起作用。在右下角我显示packery('getItemElements') 的结果，但这是只读的。

有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery-ui draggable masonry packery

【解决方案1】：

我用同位素（类似的东西）工作过。

现在直接回复http://jsfiddle.net/yry6kknh/：

$(".item .left").on("click", function() {
  var el = $(this).closest(".item");
      if (el.prev()) {
        el.insertBefore(el.prev());
         $("#cont").packery('reloadItems');
         $("#cont").packery();
      }    
});

$(".item .right").on("click", function() {
  var el = $(this).closest(".item");
      if (el.next()) {
        el.insertAfter(el.next());
        $("#cont").packery('reloadItems');
        $("#cont").packery();
      }    
});

第一个修复：使用 $("#cont") 代替范围变量 $container，以始终拥有最后一个 DOM 元素（延迟加载或其他 DOM 操作）

第二次查看http://packery.metafizzy.co/js/packery-docs.min.js，发现packery.prototype.reloadItems，当html改变时packery需要更新他的item，$("#cont").packery();强制重新渲染。

这不是最正确的方法，但很有效:)

【讨论】：

谢谢！有效。它适用于$container.packery('reloadItems').packery();

【解决方案2】：

您好，您可以使用这个https://jsfiddle.net/ibad_gore/00uvL60c/28

我对您的代码所做的更改是：

$(".item .left").on("click", function(event) {
              var ch = $(this).closest('.item');
              $container.packery( 'fit', ch[0] , 202, ch.offset().top )
});

$(".item .right").on("click", function(event) {
              var ch = $(this).closest('.item');
              $container.packery( 'fit', ch[0] , 0, ch.offset().top )
});

您可以根据需要管理值 0 和 202。

【讨论】：

谢谢，但元素的大小可能不同。 SilentTremor 的回答做到了。