I'm trying to use the jQuery UI framework with selectables.
First off, is it possible to disable allow selection with mouse drag/lasso?
Secondly, I have several selectable
elements, and I want only one of their children to be selected at a time:
<ul class="ui-selectable">
<li>foo</li>
<li>bar</li>
</ul>
<ul class="ui-selectable">
<li>foow</li>
<li>bard</li>
</ul>
<ul class="ui-selectable">
<li>foos</li>
<li>bafr</li>
</ul>
To implement this, I thought I could use a callback to disable all the other ui-selectable li
members as necessary. But is that really the best approach?
$('.ui-selectable').selectable({
selecting: function(event, ui) {
$('.ui-selectable').minus(elementBeingSelected).selectable('disable');
}
});
I know the above jQuery doesn't actually work. How can I fix it? Can I minus an element from a set returned by a jQuery selector? From that selecting
callback, how can I get the element being selected? Is selecting
the right callback to use?