jQuery UI Sortable Position

You can use the ui object provided to the events, specifically you want the stop event, the ui.item property and .index(), like this:

$("#sortable").sortable({    stop: function(event, ui) {        alert("New position: " + ui.item.index());    }});

You can see a working demo here, remember the .index() value is zero-based, so you may want to +1 for display purposes.

I wasn't quite sure where I would store the start position, so I want to elaborate on David Boikes comment. I found that I could store that variable in the ui.item object itself and retrieve it in the stop function as so:

$( "#sortable" ).sortable({    start: function(event, ui) {        ui.item.startPos = ui.item.index();    },    stop: function(event, ui) {        console.log("Start position: " + ui.item.startPos);        console.log("New position: " + ui.item.index());    }});

Use update instead of stop

http://api.jqueryui.com/sortable/

update( event, ui )

Type: sortupdate

This event is triggered when the user stopped sorting and the DOM position has changed.

.

stop( event, ui )

Type: sortstop

This event is triggered when sorting has stopped. event Type: Event

Piece of code:

http://jsfiddle.net/7a1836ce/

<script type="text/javascript">var sortable    = new Object();sortable.s1     = new Array(1, 2, 3, 4, 5);sortable.s2     = new Array(1, 2, 3, 4, 5);sortable.s3     = new Array(1, 2, 3, 4, 5);sortable.s4     = new Array(1, 2, 3, 4, 5);sortable.s5     = new Array(1, 2, 3, 4, 5);sortingExample();function sortingExample(){    // Init vars    var tDiv    = $('<div></div>');    var tSel    = '';    // ul    for (var tName in sortable)    {        // Creating ul list        tDiv.append(createUl(sortable[tName], tName));        // Add selector id        tSel += '#' + tName + ',';    }    $('body').append('<div id="divArrayInfo"></div>');    $('body').append(tDiv);    // ul sortable params    $(tSel).sortable({connectWith:tSel,       start: function(event, ui)        {            ui.item.startPos = ui.item.index();       },        update: function(event, ui)        {            var a   = ui.item.startPos;            var b   = ui.item.index();            var id = this.id;            // If element moved to another Ul then 'update' will be called twice            // 1st from sender list            // 2nd from receiver list            // Skip call from sender. Just check is element removed or not            if($('#' + id + ' li').length < sortable[id].length)            {                return;            }            if(ui.sender === null)            {                sortArray(a, b, this.id, this.id);            }            else            {                sortArray(a, b, $(ui.sender).attr('id'), this.id);            }            printArrayInfo();        }    }).disableSelection();;// Add styles    $('<style>')    .attr('type', 'text/css')    .html(' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }')    .appendTo('head');    printArrayInfo();}function printArrayInfo(){    var tStr = '';    for ( tName in sortable)    {        tStr += tName + ': ';        for(var i=0; i < sortable[tName].length; i++)        {            // console.log(sortable[tName][i]);            tStr += sortable[tName][i] + ', ';        }        tStr += '<br>';    }    $('#divArrayInfo').html(tStr);}function createUl(tArray, tId){    var tUl = $('<ul>', {id:tId, class:'sortableClass'})    for(var i=0; i < tArray.length; i++)    {        // Create Li element        var tLi = $('<li>' + tArray[i] + '</li>');        tUl.append(tLi);    }    return tUl;}function sortArray(a, b, idA, idB){    var c;    c = sortable[idA].splice(a, 1);    sortable[idB].splice(b, 0, c);      }</script>