Clever Geek Handbook

Jquery sort / select: filtering child controls

I have a div containing nested divs, for example:

<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 am using jQuery UI's sortable behavior to allow the user to change the order of the list. The problem is that when the user clicks on the "ignore" div, the "selectable" selection is moved to that div. I would like to filter out selectable and ordered behaviors so that they only catch .node sets, ignoring the .ignore test as it contains a toolbar whose controls no longer accept clicks.

Suggestions?

+2


source to share


1 answer


For sortable (), you can specify the elements to catch.

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


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

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


source






More articles:


All Articles