Packery and infinitescroll, including draggabilly in the callback

[macsupport]

I am using packery with infinitescroll and it works well but I can't get draggabilly to work with the appended elements. I'm sure I am wrong on the callback to include dtaggabilly on the new elements

Packery code:

var $container = $('#container');
var pckry = new Packery( container, {
  // options
  itemSelector: '.item',
  gutter: 10,
  columnWidth: 185,
  rowHeight: 185
});
imagesLoaded( container, function() {
  pckry = new Packery( container );
});
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
  var elem = itemElems[i];
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( elem );
  // bind Draggabilly events to Packery
  pckry.bindDraggabillyEvents( draggie );
}

my infinite scroll callback:

 function( newElements ) {
     $(newElements).imagesLoaded( function() {
    pckry.appended( newElements ); 
  });
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
  var elem = itemElems[i];
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( elem );
  // bind Draggabilly events to Packery
  pckry.bindDraggabillyEvents( draggie );
}
}

[macsupport]

Well, I worked out the draggabilly issue by using the jqueryui method. Now infinite scroll seems to work with a page scroll but not with infinite scroll's Twitter behavior. Here is a link to see my code. It is in the main.js file for scroll and main2.js for the twitter function. I have gotten this to work with isotope very well but Im not seeing why the twitter behavior is not working.
Scroll behavior loads on scroll
Twitter behavior not working

The other issue with infinitescroll is there is no relayout of the first loaded images with window resize.

[desandro]

Okay. One problem at a time.

I am using packery with infinitescroll and it works well but I can't get draggabilly to work with the appended elements.

As I recommend in the Issues guidelines, putting together a reduced test case helps isolate the issue. I put one together that mocks infinite scrolling by just clicking a button.

http://codepen.io/desandro/pen/mjcGq

I'm using jQuery to match your code. To make item elements draggable, I use .each():

  // bind draggabilly events to item elements
  $container.find('.item').each( makeEachDraggable );

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

This can be re-used when adding new items

    var $items = $(items);
    // add to packery layout
    $container.append( $items )
      .packery( 'appended', $items );
    // make item elements draggable
    $items.each( makeEachDraggable );

Here's a shot at re-factoring your code, with the makeEachDraggable helper function.

var $container = $('#container');
$container.packery({
  itemSelector: '.item',
  gutter: 10,
  columnWidth: 185,
  rowHeight: 185
})
  .imagesLoaded( function() {
    // trigger packery layout after images have loaded
    container.packery();
  });

// bind draggabilly events to item elements
$container.find('.item').each( makeEachDraggable );

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

$container.infinitescroll({
  // infinite scroll options
}, function( newElems ) {
  var $newElems = $(newElems);
  $newElems.imagesLoaded( function() {
    $container.packery( 'appended', $newElems );
    $newElems.each( makeEachDraggable );
  });
});

---

not with infinite scroll's Twitter behavior

I would suggest trying a version where packery and Draggabilly are removed and seeing if the problem persists.

[macsupport]

Thanks. Fixed infinitescroll twitter function and draggabilly with your help and even added a search function similar to your Isotope example using quicksearch. Sorry for the multiple questions!

Mike

[kosir]

Thank you for this example! Would it be possible to do this with "bindUIDraggableEvents"? I'm trying this but with no success: http://codepen.io/kosirm/pen/eIqyF

[desandro]

@koris Sure thing see http://codepen.io/desandro/pen/wvKhj