CODEWITHSUNDEEP
jqueryjquery-ui
Yuvi
Yuvi

Reputation: 4637

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

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?

Upvotes: 3

Views: 2107

Answers (1)

Heath
Heath

Reputation: 76

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.

Upvotes: 1

Related Questions