PORTFOLIO - 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="packery">
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some content.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some content.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some sdf sda fasdf asd fcontent.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some content.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some content.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some content.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">eeeeeeeeeee</div>
        <div class="item-content">Some content.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Item</div>
        <div class="item-content">Some dddddddddddddddd.</div>
    </div>
    <div class="item pull-left">
        <div class="item-header">Another Item</div>
        <div class="item-content">Some more ssssssssssssssssssssss.</div>
    </div>
</div>

CSS

/* apply a natural box layout model to all elements */
 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.packery {
//  width: 200px; /* for draggabilly scenario */
    width: 100%; /* for packery only scenario */
//  height: 100px; /* for draggabilly scenario */
    height: 600px; /* for packery only scenario */
}
/* clearfix */
.packery:after {
    content:' ';
    display: block;
    clear: both;
}
.item {
    margin:0;
    width:100px;
    height:100px;
    background-color: rgba(191, 225, 191, 1);
}
.item:hover {
    border-color: #999;
}
.xxxitem.is-dragging, .item.is-positioning-post-drag {
    border-color: #999;
    background: rgba(136, 204, 255, 0.5);
    z-index: 2;
}
.xxxitem-header {
    padding:5px;
    width:100%;
    background-color:#bbb;
    text-align:center;
    cursor:move;
}
.xxxitem-content {
    padding:5px;
    /* whatever */
}

JavaScript

var $container = $('.packery');
$container.packery({
//	OPTIONAL, as we don't have to know dimensional attributes of our container
		rowWidth: 300,
    rowHeight: 100, /* +2 for the bottom margin on .item */
    columnWidth: 100
});
function bizamajig__bind__draggable( i, item_element ) {
//	make element draggable with Draggabilly
    var $element = new Draggabilly( item_element, {
        axis: 									'x',
        handle: 								'.item-header'
    });
//	bind Draggabilly events to Packery
    $container.packery( 'bindDraggabillyEvents', $element);
}
//	bind draggabilly events to item elements
//$container.find( '.item' ).each( bizamajig__bind__draggable );