jquery Sortable/Selectable: filtering child controls

Question

I have a div containing nested divs, like so:

<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>

Then, to add sortable() and selectable()

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

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

I'm using the jQuery UI "sortable" behavior so that the user can reorder the list. The problem is that when the user clicks a div with the class "ignore," the "selectable" highlight moves to that div. I'd like to filter the selectable and sortable behaviors so that they only catch the .node sets, ignoring the .ignore test as it contains a toolbox whose controls no longer accept clicks.

Suggestions?

Answer 1

For sortable() you can specify the items to catch.

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

I haven't used it, but it looks like selectable() has a filter option. Maybe try this:

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