jQuery Sortable With Swapping

jQuery Sortable With Swapping

by santosh_patnala

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<ul id="sortable">
    <li class="ui-state-default" id="1">1</li>
    <li class="ui-state-default" id="2">2</li>
    <li class="ui-state-default" id="3">3</li>
    <li class="ui-state-default" id="4">4</li>
    <li class="ui-state-default" id="5">5</li>
    <li class="ui-state-default" id="6">6</li>
    <li class="ui-state-default" id="7">7</li>
    <li class="ui-state-default" id="8">8</li>
    <li class="ui-state-default" id="9">9</li>
    <li class="ui-state-default" id="10">10</li>
    <li class="ui-state-default" id="11">11</li>
    <li class="ui-state-default" id="12">12</li>
</ul>

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;
 }

JavaScript

$("#sortable").sortable({
    start: function (event, ui) {
        oldIndex = ui.item.index();
    },
    stop: function (event, ui) {
        var newIndex = ui.item.index();
        var movingForward = newIndex > oldIndex;
        var nextIndex = newIndex + (movingForward ? -1 : 1);

        var items = $('#sortable > li');

        // Find the element to move
        var itemToMove = items.get(nextIndex);
        if (itemToMove) {

            // Find the element at the index where we want to move the itemToMove
            var newLocation = $(items.get(oldIndex));

            // Decide if it goes before or after
            if (movingForward) {
                $(itemToMove).insertBefore(newLocation);
            } else {
                $(itemToMove).insertAfter(newLocation);
            }
            console.log($("#sortable").sortable("toArray"));
        }
    }
});

$("#sortable").disableSelection();