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

Question

我在jQuery UI中创建了一个可排序选项卡，但我想锁定最后一个选项卡。我已经把它移到了右边，但它仍然可以排序。我需要做什么来锁定最后添加的选项卡？

Answer 1

正式地，您可以指定可排序的哪些子项，只需将属性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'); 
});