views:

9

answers:

0

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?