在jQuery可排序选项卡中锁定一个选项卡

Question

我正在jQuery UI中创建一个可排序的选项卡，但我想锁定最后一个选项卡。我已将它向右平移，但它仍然可以排序。如何锁定最后添加的标签需要做什么？

Answer 1

正式地说，您可以在sortable上指定要排序的子项，只需将属性items设置为选择器。

虽然在移动其他选项卡时禁用排序（意味着禁用的选项卡永远不会移动），但仍可以拖动它。要解决此问题，只需将函数绑定到项目的mousedown事件，然后调用stopPropagation()以防止拖动。

请参阅此jsfiddle示例：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');
});