Question

I’m using jQuery UI sortable to allow the user to shuffle the list, but the stop event returns the entire list.

So I process:

$(this).children('li').each(function(index) {

But what I really want to do is process only the range that’s affected. I suppose what I need is: the list item that is being dragged, and the list item that it is being placed before (or after, which ever is convenient). That way I can update the range within the list that is being affected, and not have to update the entire list.

Maybe I should just keep add a data-Counter attribute to each list item and see if they are different from the index.

Answer 1

You can easily work it out if you save the item’s start position when dragging starts.

$('ul').sortable({
    start: function(event,ui){
        ui.item.data('index',ui.item.index());
    },
    stop: function(event,ui){
        var startIndex = parseInt(ui.item.data('index'),10);
        var stopIndex = ui.item.index();

        var msg = '';
        msg += 'id of item: ' + ui.item.attr('id') + '\n';
        msg += 'start index: ' + startIndex + '\n';
        msg += 'stop index: ' + stopIndex + '\n';
        msg += 'prev item id: ' + ui.item.prev().attr('id') + '\n';
        msg += 'next item id: ' + ui.item.next().attr('id') + '\n';

        alert(msg);
    }
});

Try my demo: http://jsfiddle.net/b8uJ8/