jQuery UI - Multiple Select behavior (ctrl+click) by default for 'selectable'?

Question

Is there a way to make the jQuery UI's Selectable interaction go into 'multiple selects' (select via left click, click again to unselect) behavoir, rather than the click-to-exclusively-select-and-unselect-everything-else behavior?

Answer 1

I think this will give you the sort of functionality you are looking for:

1) In the Selectable() section of the latest jquery-ui.js, modify the _MouseStart function to look like this:

_mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
        return;

    var options = this.options;

    this.selectees = $(options.filter, this.element[0]);

    this._trigger("start", event);

    $(options.appendTo).append(this.helper);
    // position helper (lasso)
    this.helper.css({
        "left": event.clientX,
        "top": event.clientY,
        "width": 0,
        "height": 0
    });

    if (options.autoRefresh) {
        this.refresh();
    }
    var hasMulti = false;
    if(this.element.attr("multi") == undefined || !eval(this.element.attr("multi")))
    {
        hasMulti = true;
    }

    this.selectees.filter('.ui-selected').each(function() {
        var selectee = $.data(this, "selectable-item");
        selectee.startselected = true;
        if (!event.metaKey) {
            if(hasMulti)
            {
                selectee.$element.removeClass('ui-selected');
                selectee.selected = false;
                selectee.$element.addClass('ui-unselecting');
                selectee.unselecting = true;
                // selectable UNSELECTING callback
                self._trigger("unselecting", event, {
                    unselecting: selectee.element
                });
            }
        }
    });

    $(event.target).parents().andSelf().each(function() {
        var selectee = $.data(this, "selectable-item");
        if (selectee) {
            var doSelect = false;
            if(hasMulti)
            {
                doSelect = !event.metaKey ||  !selectee.$element.hasClass('ui-selected');
            }
            else
            {
                doSelect =  !selectee.$element.hasClass('ui-selected');
            }

            selectee.$element
                .removeClass(doSelect ? "ui-unselecting" : "ui-selected")
                .addClass(doSelect ? "ui-selecting" : "ui-unselecting");
            selectee.unselecting = !doSelect;
            selectee.selecting = doSelect;
            selectee.selected = doSelect;
            // selectable (UN)SELECTING callback
            if (doSelect) {
                self._trigger("selecting", event, {
                    selecting: selectee.element
                });
            } else {
                self._trigger("unselecting", event, {
                    unselecting: selectee.element
                });
            }
            return false;
        }
    });

}

2) Then, in your markup, add an attribute called "multi" to your list element and set it to "true".

<ul multi="true">
  <li>test1</li>
  <li>test2</li>
</ul>

You will see I added a var called hasMulti and used it in two conditionals to achieve the desired behavior.

This will make it so that you can selected multiple items (and unselect) without having to use ctrl + mouse click.

If I totally misinterpreted your question. Then disregard this post.