SORTABLE - MULTIPLE LISTS - GALLERY STYLE FLOAT LEFT - BIZAMAJIG USAGE

by bizamajig

HTML

<div class="lists">
    <ul id="list-1" class="group">
         <li data-post-id="post-1">Post 1</li>
         <li data-post-id="post-2">Post 2</li>
         <li data-post-id="post-3">Post 3</li>
         <li data-post-id="post-4">Post 4</li>
         <li data-post-id="post-5">Post 5</li>
         <li data-post-id="post-6">Post 6</li>
         <li data-post-id="post-7">Post 7</li>
         <li data-post-id="post-8">Post 8</li>
     </ul>            
     <div class="clear"></div>
     <hr />
     <ul id="list-2" class="group">     
         <li data-post-id="post-9">Post 9</li>
         <li data-post-id="post-10">Post 10</li>
         <li data-post-id="post-11">Post 11</li>
         <li data-post-id="post-12">Post 12</li>
         <li data-post-id="post-13">Post 13</li>
         <li data-post-id="post-14">Post 14</li>
         <li data-post-id="post-15">Post 15</li>
         <li data-post-id="post-16">Post 16</li>
      </ul>
</div>

CSS

ul { list-style: none; float:left  }
li { margin:5px; padding:5px; background:#ccc; cursor:move; width: 100px; height: 100px; float: left;}
li:hover { background:#bbb; }
li:active { background:#999; }


.clear { clear: both; }
.lists {  width: 480px; float: left; }

JavaScript

$(document).ready(function() {
    $('#list-1, #list-2').sortable({
        connectWith: '.group',
        update: function(event, ui) {
            var orders = new Array();
            $('.group li').each(function(i) {           
                var id = $(this).data('post-id');
                orders.push(parseInt(id.substr(id.indexOf('-')+1)));
            });
            console.log(orders)
        }
    });

});