在可拖动+包装(砌体)中以编程方式重新排序或移动元素

Question

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

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

如果我拖动块，它工作。在右下角，我显示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();
      }    
});

第一个修复:使用$("#cont")代替作用域变量$container，以拥有所有时间的最后一个DOM元素(延迟加载或其他DOM操作)

第二，我检查http://packery.metafizzy.co/js/packery-docs.min.js，找到packry .prototype。reloadItems，当html被改变时，packery需要更新他的items，和$("#cont").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