Jquery sortable 'change' event element position

UPDATED: 26/08/2016 ^{to use the latest jquery and jquery ui version plus bootstrap to style it.}

• demo: http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/

$(function() {    $('#sortable').sortable({        start: function(event, ui) {            var start_pos = ui.item.index();            ui.item.data('start_pos', start_pos);        },        change: function(event, ui) {            var start_pos = ui.item.data('start_pos');            var index = ui.placeholder.index();            if (start_pos < index) {                $('#sortable li:nth-child(' + index + ')').addClass('highlights');            } else {                $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');            }        },        update: function(event, ui) {            $('#sortable li').removeClass('highlights');        }    });});

This works for me:

start: function(event, ui) {        var start_pos = ui.item.index();        ui.item.data('start_pos', start_pos);    },update: function (event, ui) {        var start_pos = ui.item.data('start_pos');        var end_pos = ui.item.index();        //$('#sortable li').removeClass('highlights');    }

Use update, stop and receive events, check it over here

Jquery Sortable Update Event can called only one time?