0

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

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

如果我拖动块它可以工作。在右下角我显示结果,packery('getItemElements')但这是只读的。

有没有办法做到这一点?

4

2 回答 2

3

我工作过但使用同位素(类似的东西)。

现在直接回答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需要更新他的物品,并且$("#cont") .packery(); 强制重新渲染。

这不是最正确的方法,但正在工作:)

于 2015-06-03T15:16:40.497 回答
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。

于 2015-06-03T15:26:12.930 回答