0

我正在向第三方控件（选项卡式控件）添加通过拖放重新排列其选项卡的功能。只应允许移动选定的选项卡。为此，我在 jquery ui 中使用带有 cancel 属性的 sortable 函数。

该控件有一个 div 包含选项卡（也是 div），但 div 选项卡也包含更多 div：

<div class="TabControl-Container"> 
   <div class="ui-state-default TabControl-Tab_Selected">Tab 1
       <div>tab container</div>
   </div>
   <div class="ui-state-default">Tab 2
       <div>tab container</div>
   </div>
   <div class="ui-state-default">Tab 3
       <div>tab container</div>
   </div>
   <div class="ui-state-default">Tab 4
       <div>tab container</div>
   </div>
 </div>

为了限制仅选择选项卡的移动，我在取消属性中执行了否定选择器：

$(function () {
    var dummy = $(".TabControl-Container");

    $(dummy).sortable({
        cancel: 'div :not(.TabControl-Tab_Selected)'
    });
});

它正在禁用除“Tab 1”以外的选项卡（没关系），但问题是 Tab 1 中包含的 div 也被禁用。我需要可以拖动选项卡 1 内的 div（或任何类似图像的标签）或不能移动孔选项卡。

你可以在这里看到问题：http: //jsfiddle.net/WD2Rw/24/

4

1 回答 1

0

不幸not child of的是，CSS4 将支持选择器，目前情况并非如此。

这可能是支持 CSS 属性的现代浏览器的一种解决方法pointer-events：

{ 但嵌套元素不会响应鼠标事件 }

http://jsfiddle.net/WD2Rw/27/

$(function () {
    var dummy = $(".TabControl-Container"),
        nestedElem = $(".TabControl-Tab_Selected *");
    nestedElem.css({pointerEvents:'none'});

    $(dummy).sortable({
        cancel: 'div :not(.TabControl-Tab_Selected)'
    }).disableSelection();
});
于 2013-06-07T13:16:40.350 回答