Packery: Enable Dragability And Gutter

I am using Packery a JavaScript library and jQuery plugin that makes gapless and draggable layouts created by David DeSandro. I use this to set up my portfolio but the following codes below are not working. I want to makes elements draggable (draggable) and adds horizontal and vertical space between item elements (gutter).

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript" src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>    
    <script type="text/javascript" src="https://npmcdn.com/draggabilly@2/dist/draggabilly.pkgd.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>

<div class="grid">
  <div class="grid-item grid-item--width2"><img src="http://www.naturalnews.com/gallery/640/Food/Fancy-Food.jpg" style="width: 100%; height: 100%;"></div>
  <div class="grid-item"><img src="https://s3-us-west-1.amazonaws.com/cdn.myawesomeurls.com/2317223231481790331/collections/9169011391481887406/bg_image.jpg" style="width: 100%; height: 100%;"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
</div>

</body>

</html>
<style type="text/css">
* { box-sizing: border-box; } 

body { font-family: sans-serif; }

.grid {
  background: #DDD;
  max-width: 1200px;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #C09;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }

.grid-item:hover {
  border-color: hsla(0, 0%, 100%, 0.5);
  cursor: move;
}

.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
  background: #C90;
  z-index: 2;
}

.packery-drop-placeholder {
  outline: 3px dashed hsla(0, 0%, 0%, 0.5);
  outline-offset: -6px;
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}

</style>
<script type="text/javascript">

var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100, 
  gutter: 10
});

// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
  var draggie = new Draggabilly( gridItem ); // bind drag events to Packery

  $grid.packery( 'bindDraggabillyEvents', draggie );
});

$grid.on( 'click', '.grid-item', function( event ) {
  // change size of item by toggling large class
  $(  event.currentTarget  ).toggleClass('grid-item--large');
  // trigger layout after item size changes
  $grid.packery('layout');
});

</script>

Solution

Always include jquery.min.js at top. The main error was caused because of that file being loaded at the end which gave an uncaught type error of packery being not defined. Rest all code was correct.

Here is the correct working solution.

var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100,
  gutter: 10
});

// make all grid-items draggable
$grid.find('.grid-item').each(function(i, gridItem) {
  var draggie = new Draggabilly(gridItem); // bind drag events to Packery

  $grid.packery('bindDraggabillyEvents', draggie);
});

$grid.on('click', '.grid-item', function(event) {
  // change size of item by toggling large class
  $(event.currentTarget).toggleClass('grid-item--large');
  // trigger layout after item size changes
  $grid.packery('layout');
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.grid {
  background: #DDD;
  max-width: 1200px;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #C09;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 {
  width: 200px;
}

.grid-item--height2 {
  height: 200px;
}

.grid-item:hover {
  border-color: hsla(0, 0%, 100%, 0.5);
  cursor: move;
}

.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
  background: #C90;
  z-index: 2;
}

.packery-drop-placeholder {
  outline: 3px dashed hsla(0, 0%, 0%, 0.5);
  outline-offset: -6px;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/draggabilly@2/dist/draggabilly.pkgd.js"></script>



<div class="grid">
  <div class="grid-item grid-item--width2"><img src="http://www.naturalnews.com/gallery/640/Food/Fancy-Food.jpg" style="width: 100%; height: 100%;"></div>
  <div class="grid-item"><img src="https://s3-us-west-1.amazonaws.com/cdn.myawesomeurls.com/2317223231481790331/collections/9169011391481887406/bg_image.jpg" style="width: 100%; height: 100%;"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
</div>