I wrote here how to make two elements to swap each other. But one little problem remain unsolved: you swap elements, but how do you inform server about your changes? Well… With a serialize function, ofcourse!

1
2
3
4
5
6
7

function serialize (drag, elements) {
	var serialResult='';
	$('.'+drag).find(elements).each(function(){
		serialResult += drag + '[]=' + this.id +'&';
	});
	return serialResult;
};

You call this function on event onDrop and function will return a hash for all elements:

alert(serialize('droppableBox', '.swappable'));

With this result you can inform server of any element position changes. Nice, isn’t ?