jQuery UI Sortable Position

How do I track what position an element is when its position in a sortable list changes?

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>

As per the official documentation of the jquery sortable UI: http://api.jqueryui.com/sortable/#method-toArray

In update event. use:

var sortedIDs = $( ".selector" ).sortable( "toArray" );

and if you alert or console this var (sortedIDs). You'll get your sequence. Please choose as the "Right Answer" if it is a right one.