Пример сортировки блоков мышкой (интерфейс) drug & drop JQuery UI - код и HTML

Итак, чуть более подробный (чем здесь) - пример:

// сортировка (drug & drop)-----------

$(function() {
$( ".sortable" ).sortable({
	handle: '.sortable-handle', // ограничим активизацию перетаскивания одним из подблоков строки списка
	delay: 150, // задержка после клика(чтобы не вызвать сортировку случайно)
	axis: 'y', // сортируем только по вертикали (в данном случае)
	stop: function (event, ui) {
		var data = {earr: $(this).sortable('serialize')}; // получаем ланные о классе
		$.ajax({
			data: data,
			type: 'POST',
			url: '/someurl', //куда будем отправлять запрос сообщая о новом порядке
			success: function(response, textStatus) {
				//console.log('responce = ' , response);

				floatmsgbox({ // например выводим всплыв окно - или исп. alert() 
					type: 'success',
					text:  JSON.parse(response).message
				});
			},
			error: function(response, textStatus) { // если ошибка
				console.log('responce = ' , response);
				console.log('textStatus = ' , textStatus);
				if (textStatus != 'abort') {

					floatmsgbox({ // например выводим всплыв окно - или исп. alert() 
							type: 'error',
							text: JSON.parse(response.responseText).message
					});
				}
			}
			
		});
	}
 });

чтобы список был сортируемым достаточно написать ("начать с"):

    <ul class="sortable">

Также обратите внимание на способ формирования id для каждого li (элемента списка) - именно на основании этих id и можно получать сведения о новом порядке элементов.