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?

I wrote a small bit of logic on my own to simulate this. Was easy enough. — Yuvi
– Yuvi, Commented Aug 14, 2009 at 9:35
Do you mean something like stackoverflow.com/questions/9208849/… ? — LCJ
– LCJ, Commented Feb 10, 2012 at 8:20
you might want to check this out stackoverflow.com/questions/4701311/… — xar
– xar, Commented Feb 15, 2012 at 1:27

Heath · Accepted Answer · 2012-02-19 00:01:14Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related