Draggabilly - MULTIPLE Packery - JQuery Approach - BIZAMAJIG USAGE

SEE PACKERY HOWTO - https://github.com/metafizzy/packery/issues/19

by bizamajig

HTML

<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<h1>order storage test</h1>
<div class="packery packery-1">
  <div class="item w2 h2 i1" tabindex="0">A</div>
  <div class="item w2 h2 i2" tabindex="1">B</div>
  <div class="item w2 h2 i3" tabindex="2">C</div>
  <div class="item w2 h2 i4" tabindex="3">D</div>
  <div class="item w2 h2 i5" tabindex="4">E</div>
</div>
<div class="packery packery-2">
  <div class="item w2 h2 i1" tabindex="0">A</div>
  <div class="item w2 h2 i2" tabindex="1">B</div>
  <div class="item w2 h2 i3" tabindex="2">C</div>
  <div class="item w2 h2 i4" tabindex="3">D</div>
  <div class="item w2 h2 i5" tabindex="4">E</div>
</div>

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: 520px;
}

/* 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);
  font-size: 20px;
  color: white;
  padding: 10px;
}

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


.item.w2 { width:   80px;  }
.item.h2 { height:  80px;  }

.item.w2.i1 { background: #ffff00; }
.item.w2.i2 { background: #ff6633; }
.item.w2.i3 { background: #00c6d7; }
.item.w2.i4 { background: #990099; }
.item.w2.i5 { background: #EEEEEE; }

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

JavaScript

//
// http://packery.metafizzy.co/packery.pkgd.js and 
// http://draggabilly.desandro.com/draggabilly.pkgd.js added as external resource

// ----- text helper ----- //

$( function() {

	function bizamajig__sort_items__from_storage_1( input__pckry, input__sort_order, input__sort_order_text ) {
		var itemElems 																	= $container.data( 'packery' ).getItemElements();
// 		reset / empty oder array
		sort_order.length 																= 0;
		for ( var i = 0; i < itemElems.length; i++ ) {
			sort_order[ i ] 																= itemElems[ i ].getAttribute( 'tabindex' );
		}
// 		save tabindex ordering
		localStorage.setItem( 'sort_order', JSON.stringify( sort_order ) );
	}

  var $container 																		= $( '.packery-1' ).packery({
		columnWidth: 																	80,
		rowHeight: 																		80,
		// disable initial layout
		isInitLayout: 																	false
	});
	
	var pckry 																			= $container.data( 'packery' );
	
	// ----- initial sort ----- //
	
	var sort_order 																		= []; // global variable for saving order, used later
	var input__stored_sort_order 																= localStorage.getItem( 'sort_order' );

	if ( input__stored_sort_order ) {
		input__stored_sort_order 																= JSON.parse( input__stored_sort_order );
		// create a hash of items by their tabindex
		var itemsByTabIndex 															= {};
		var 																			tabIndex;
		for ( var i = 0, len = pckry.items.length; i < len; i++ ) {
			var item 																	= pckry.items[ i ];
			tabIndex 																	= $( item.element ).attr( 'tabindex' );
			itemsByTabIndex[ tabIndex ] 												= item;
		}
// 		overwrite packery item order
		i 																				= 0;
		len 																			= input__stored_sort_order.length;
		for ( ; i < len; i++ ) {
			tabIndex 																	= input__stored_sort_order[ i ];
			pckry.items[ i ] 															= itemsByTabIndex[ tabIndex ];
		}
	}

	// ----- packery setup ----- //
	
	// trigger initial...