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

SEE ALSO - https://css-tricks.com/draggable-elements-push-others-way/ 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 bg-white paper'>
  <div class='row' id='dashboard-root'>
    <div class='col-xs-12 col-sm-6 dashboard-item'>


			
				<!-- Header -->
				<h1 data-animation-delay="100" data-animation="fadeIn" class="header uppercase animated      f-s-5       text-left materialized-animation-refresh fadeIn visible">
					Insalata
				</h1>
				<!-- Header Strip(s) -->
				<hr data-animation-delay="100" data-animation="fadeIn" class="animated       m-t-0      b-t-2      b-t-dotted materialized-animation-refresh fadeIn visible">
				<!-- Header Description -->
				<h2 data-animation-delay="100" data-animation="fadeIn" class="description normal animated materialized-animation-refresh fadeIn visible">
					
				</h2>






				<div class="row m-b-10">
					<div class="col-xs-12">
	
						<h4 class="m-b-0 f-s-1-3 xxx-font-content-area text-left">
							Gorgonzola
							| <span class="m-r-15">9</span>

						</h4>

						<div class="list-group-item-text xxx-color-dark-blue">romaine hearts, tomatoes, gorgonzola cheese, and a light Italian dressing</div>

					</div>
				</div>

				<div class="row m-b-10">
					<div class="col-xs-12">
	
						<h4 class="m-b-0 f-s-1-3 xxx-font-content-area text-left">
							Greek
							| 8/16
						</h4>

						<div class="list-group-item-text xxx-color-dark-blue">romaine lettuce, feta cheese, red onions, olives, pepperoncini, tomatoes, house Greek dressing</div>

					</div>
				</div>

				<div class="row m-b-10">
					<div class="col-xs-12">
	
						<h4 class="m-b-0 f-s-1-3 xxx-font-content-area text-left">
							Insalata Mista
							| 6/12
						</h4>

						<div class="list-group-item-text xxx-color-dark-blue">field greens, tomatoes, cucumbers, olive oil lemon dressing</div>

					</div>
				</div>

				<div class="row m-b-10">
					<div class="col-xs-12">
	
						<h4...

CSS

.dashboard-item{
  border-style: solid ;
  width: 48%;
}

.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);
});