Skip to content

Instantly share code, notes, and snippets.

@codecowboy
Created March 10, 2014 18:43
Show Gist options
  • Save codecowboy/9471502 to your computer and use it in GitHub Desktop.
Save codecowboy/9471502 to your computer and use it in GitHub Desktop.
A Pen by Luke Mackenzie.
<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>
// 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 );
});
* {
-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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment