locking one tab in jQuery's sortable tab

I'm creating a sortable tab in jQuery UI but I want to lock the last tab. I already panned it to the right, but it can still be sorted. W开发者_运维问答hat do I need to do to lock the last added tab?

Officially, you can specify on the sortable which sub-items you want to be sortable, just set the property items to a selector.

While it disables sorting when moving the other tabs (meaning the disabled tab never moves), it can still be dragged. To work around this issue, just bind a function to the item's mousedown event and call stopPropagation() to prevent the drag.

See this jsfiddle example: http://jsfiddle.net/wZ4c6/1/

$('#tabs').tabs().find('.ui-tabs-nav').sortable({
    axis: 'x',
    items: '> li:not(.locked)' //This will prevent sortables to move around the locked item
});

$('button').button().click(function(){
    // Lock last tab
    $('#tabs > ul > li:last').addClass('locked').mousedown(function(event){
        event.stopPropagation();
    });

    // Refresh sortable items
    $('#tabs').find('.ui-tabs-nav').sortable('refresh');
});