Question

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

控件有一个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/

Answer 1

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

这可能是支持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();
});

可排序的取消属性jQuery UI上的否定选择器

1 个答案: