jQuery Sortin'

by JoshuaIRL

HTML

<link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css">
<div class="container">
        <div class="span-24 last">
            <div class="header">
            <h1>jQuery / Javascript Practice</h1>
            </div>
        </div>
        <div class="span-24 last">
            <h2>Sorting Learning</h2>
            <div class="uiSort">
            
            </div>
        </div>
        </div>

CSS

.uiSort { width:370px; }
            .item { width:50px; height:50px; line-height:50px; background-color:#EEE; margin:2px; float:left; text-align:center; }
            .dragging { background-color:#0099FF; }
            .placeholder { width:50px; height:50px; line-height:50px; background-color:#514721; margin:2px; float:left; text-align:center; }

JavaScript

$(document).ready(function() {
            var arrayData = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'];
            
            $(arrayData).each(function(i) {
             $('<span/>').addClass('item').html(arrayData[i]).appendTo('.uiSort');
            });
            
    $('.uiSort').sortable({items:'.item', tolerance:'pointer',
                           change:function(ev,ui) {
                               $('.item').each(function() {
                                   if($(this).index() <= 5) {
                                      $(this).addClass('shown')
                                      .removeClass('hidden')
                                   } else {
                                         $(this).removeClass('shown')
                                      .addClass('hidden')  
                                   }, 
                                   stop:function(ev,ui) {
                                        $('.item').each(function() {
                                   if($(this).index() <= 5) {
                                      $(this).addClass('shown')
                                      .removeClass('hidden')
                                   } else {
                                         $(this).removeClass('shown')
                                      .addClass('hidden')  
                                   
                                   }
                               });
                          }
                          });
        });