javascript - jquery 可排序/可选 : filtering child controls

Question

我有一个包含嵌套 div 的 div，如下所示:

<div id="tree" class="tree">
<div class="node"><div class="handle"></div>Node 1<div class="ignore"></div>
<div class="node"><div class="handle"></div>Node 2<div class="ignore"></div>
<div class="node"><div class="handle"></div>Node 3<div class="ignore"></div>
</div>

然后，添加 sortable() 和 selectable()

$('.tree').sortable({
  handle:'.handle'
});

$('.tree').selectable();

我正在使用 jQuery UI“可排序”行为，以便用户可以对列表重新排序。问题在于，当用户单击具有“忽略”类的 div 时，“可选”突出显示会移动到该 div。我想过滤可选择和可排序的行为，以便它们只捕获 .node 集，忽略 .ignore 测试，因为它包含一个工具箱，其控件不再接受点击。

建议？

Answer 1

对于 sortable() ，您可以指定要捕获的项目。

$('.tree').sortable({
  handle: '.handle',
  items: 'div:not(.ignore)'
});

我没用过，但看起来像selectable()有一个过滤器选项。也许试试这个:

$('.tree').selectable({
  filter: 'div:not(.ignore)'
});