删除然后将相同的元素添加到 Packery JS

Question

我想删除 2 个元素，然后在单击按钮时将它们添加回使用 Packery 构建的网格。代码如下：

$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = getItemElement().add( getItemElement() ).add( getItemElement() );
  var $items2 =  $('.big');
  var el = $items2;

  // remove and then append elements to container
  $grid.packery('remove', $items2).packery('layout')
  $grid.append( $items2 )
    // add and lay out newly appended elements
    .packery( 'appended', $items2 );
});

如果我这样做，$items2 引用的元素会出现在重新加载 Packery 时，但随后会消失。 Codepen demo here。有谁知道我如何删除这两个元素然后以稳定的方式将它们添加回来？提前致谢！！

Answer 1

我添加了 .clone() 函数以在删除之前复制 then 元素。然后我删除了旧的。效果很好。

新 CodePen：

http://codepen.io/anon/pen/qrzxWG

// external js: packery.pkgd.js

var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = getItemElement().add( getItemElement() ).add( getItemElement() );
    var $new = $('.big').clone();
    var $items2 =  $('.big');
    var el = $items2;
    // append elements to container
    $grid.packery('remove', $items2).packery('layout')
    $grid.append( $new )
      // add and lay out newly appended elements
      .packery( 'appended', $new );
});


// make <div class="grid-item grid-item--width# grid-item--height#" />
function getItemElement() {
  var $item = $('<div class="grid-item"></div>');
  // add width and height class
  var wRand = Math.random();
  var hRand = Math.random();
  var widthClass = wRand > 0.85 ? 'grid-item--width3' : wRand > 0.7 ? 'grid-item--width2' : '';
  var heightClass = hRand > 0.85 ? 'grid-item--height3' : hRand > 0.5 ? 'grid-item--height2' : '';
  $item.addClass( widthClass ).addClass( heightClass );
  return $item;
}

/* Unmodified so I minified it */

*{box-sizing: border-box;}body{font-family: sans-serif;}/* ---- grid ---- */.grid{background: #DDD; max-width: 1200px;}/* clear fix */.grid:after{content: ''; display: block; clear: both;}/* ---- .grid-item ---- */.grid-item{float: left; width: 80px; height: 80px; background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5);}.grid-item--width2{width: 160px;}.grid-item--height2{height: 160px;}.grid-item--width3{width: 240px;}.grid-item--height3{height: 240px;}button{font-size: 20px;}

<!-- left unmodified so it's minified -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://mfzy.co/packery.pkgd.js"></script><div class="grid"> <div class="grid-item grid-item--width2"></div><div class="grid-item grid-item--height2"></div><div class="grid-item big"></div><div class="grid-item big"></div><div class="grid-item grid-item--height2"></div></div><p><button class="append-button">Append items</button></p>

删除然后将相同的元素添加到 Packery JS

Remove and then add same element to Packery JS

html

javascript

css

jquery

packery