当前位置：文江博客话题详情

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

发布于 2024-11-06 14:30:35 字数 84 浏览 0 评论 0原文

我正在 jQuery UI 中创建一个可排序选项卡，但我想锁定最后一个选项卡。我已经将其平移到右侧，但仍然可以排序。我需要做什么才能锁定最后添加的选项卡？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬心 2024-11-13 14:30:35

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

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

回复收藏 0 原文

~没有更多了~