Удалить, а затем добавить этот же элемент в 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 здесь. Кто-нибудь знает, как я могу удалить 2 элемента, а затем добавить их обратно стабильным образом? Заранее спасибо!!

Answer 1

Я добавил .clone() Функция для дублирования затем элемента перед его удалением. Затем я удалил старый. Это работало довольно хорошо.

Новый 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>