Using Packery with Rails

This is my first Stack Overflow question!

I am building a Pinterest clone with Rails and using Packery for the index page; I want to be able to move around posts on the page and Packery seems like the tool for the job. I installed Packery with Bower and included it in my application.js file

//= require packery/dist/packery.pkgd.min.js

Below that, I have this block of code

$(document).ready(function(){
  $('.grid').imagesLoaded(function() {
    $('.grid').packery({
      itemSelector: '.grid-item'
    });
  })
});

When I run the page, the layout flows just like Masonry does, but I can't drag and drop the images (all stored in a with a class of ".grid-item"). Am I missing something? I am using Bootstrap as well, for what that's worth.

Thanks!

It’s easy to miss, but the documentation page Packery – Draggable is linked in Packery’s intro paragraph like this:

Elements can be … dragged around.

That documentation page seems to indicate that you need to include an external library to add draggability. For example, you can use the library it recommends, Draggabilly, by installing it with Bower and including it with Sprockets like you’ve done with Packery, then using this JS:

$(document).ready(function(){
  $('.grid').imagesLoaded(function() {
    $('.grid').packery({
      itemSelector: '.grid-item',
      // columnWidth helps with drop positioning
      columnWidth: 100
    });

    $grid.find('.grid-item').each( function( i, gridItem ) {
      var draggie = new Draggabilly( gridItem );
      $grid.packery( 'bindDraggabillyEvents', draggie );
    });
  })
});

See that documentation page for some CSS that you should also add.