A Pen by Luke Mackenzie.

index.html

<h1>Packery demo - jQuery UI Draggable</h1>
<div class="packery">
  <div class="item w2 h2">1</div>
  <div class="item w2 h2">2</div>
  <div class="item w2 h2">3</div>
  <div class="item w2 h2">4</div>
  <div class="item w2 h2">5</div>
  <div class="item w2 h2">6</div>
  <div class="item w2 h2">7</div>
  <div class="item w2 h2">8</div>

</div>

Packery---jQuery-UI-Draggable.markdown

Packery - jQuery UI Draggable

A Pen by Luke Mackenzie on CodePen.

License.

script.js

// http://packery.metafizzy.co/packery.pkgd.js added as external resource
// jQuery & jQuery UI included

$( function() {
  var $container = $('.packery');
  $container.packery({
    columnWidth: 80,
    rowHeight: 80
  });
  // get item elements, jQuery-ify them
  var $itemElems = $( $container.packery('getItemElements') );
  // make item elements draggable
  $itemElems.draggable();
  // bind Draggable events to Packery
  $container.packery( 'bindUIDraggableEvents', $itemElems );
});

style.css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  max-width: 240px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 40px;
  height: 40px;
  float: left;
  background: #C09;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}

.item:hover {
  border-color: white;
  cursor: move;
}

.item.w2 { width:   80px; background: #9C0; }
.item.h2 { height:  80px; background: #0C9; }


.item.ui-draggable-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  background: #09F;
  z-index: 2;
}