Sortable DIV

Rearrange the Numbers Jquery Sortable

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="content">
    <h3>Re-arrange the Numbers</h3>
    <ul id="sortable">
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">12</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">2</li>
    </ul>
</div>

CSS

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
}
#sortable li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100px;
    height: 90px;
    font-size: 4em;
    text-align: center;
    cursor:crosshair;
}
.content {
    margin:auto;
    width:450px;
}

JavaScript

/*
Jquery Plugin : www.jqueryui.com
*/
$(function () {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});