在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');
});