Height increases with multiple packery components

[anushashetty]

Thanks for such an amazing library. Its works great normally. I'm facing a issue with one of the scenario. I have multiple dynamic packery components. When i try to drag using draggable, it introduces lot of space(adds height) to the first packery element. Here is the example: https://codepen.io/anusha-shetty/pen/PLBLyo

If you try dragging the second component and then try dragging the first one here, it would create lot of blank space within the first class packery div. Please help

[desandro]

This looks to be an issue with setting up multiple container elements with a single selector. You can resolve this by setting $container within an .each()

See demo https://codepen.io/desandro/pen/fb919a0aa96b484806188fd0915ff002

$('.packery').each( function( i, container ) {
  var $container =  $( container ).packery({
    columnWidth: 80,
    rowHeight: 80
  });

  // bind draggabilly events to item elements
  $container.find('.item').each( function( i, itemElem ) {
    // make element draggable with Draggabilly
    var draggie = new Draggabilly( itemElem );
    // bind Draggabilly events to Packery
    $container.packery( 'bindDraggabillyEvents', draggie );
  });

});

I cover this concept in Un-repeat with functions on Fizzy School

[anushashetty]

That's great. Thanks @desandro