EXAMPLE- Draggabilly - Packery - JQuery (NOT Vanilla JS) - BIZAMAJIG USAGE

SEE ALSO - http://codepen.io/desandro/pen/cbhDG SEE ALSO - $scope.pckry.packery('reloadItems');

by bizamajig

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<div class='container'>
  <div class='row' id='dashboard-root'>
    <div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
      Some content
    </div>
    <div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
      Some other content<br>
    </div>
    <div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
      Even more content<br><br><br><br>
    </div>
    <div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
    Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
    </div>
  </div>
</div>

CSS

.dashboard-item{
  border-style: solid ;
}

.container{
  border-style: dashed ;
}

JavaScript

var $root = $('#dashboard-root') ;

$root.packery({
  itemSelector: '.dashboard-item'
});

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