Question

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

当我按下＃34;向左移动＆＃34; /＆＃34;向右移动＆＃34;我想左/右发送块。我通过使用el.insertBefore(el.prev()) / el.insertAfter(el.next())将其重新插入dom结构来执行此操作，但这不起作用，因为它保持left / top坐标，并且＃39;触摸包装内部结构，如果有的话。

如果我拖动它就可以了。在右下角，我显示packery('getItemElements')的结果，但这是只读的。

有办法做到这一点吗？

Answer 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();
      }    
});

首先修复：使用$（＆＃34;＃cont＆＃34;）代替范围变量$ container，以便始终拥有最后的DOM元素（延迟加载或其他DOM操作）

其次我检查http://packery.metafizzy.co/js/packery-docs.min.js并找到了packery.prototype.reloadItems，当html被更改时，packery需要更新他的项目，$（＆＃34;＃cont＆＃34;）。packery（）;强制重新渲染。

这不是最正确的方法，但是有效：）

Answer 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。

以编程方式重新排序或移动Draggable + Packery（Masonry）

2 个答案: