3

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?

Yuvi
  • 4,447
  • 8
  • 35
  • 42
  • I wrote a small bit of logic on my own to simulate this. Was easy enough. – Yuvi Aug 14 '09 at 09:35
  • Do you mean something like http://stackoverflow.com/questions/9208849/jquery-selectable-customization ? – LCJ Feb 10 '12 at 08:20
  • you might want to check this out http://stackoverflow.com/questions/4701311/selectable-multiple-sortable-advanced – xar Feb 15 '12 at 01:27

1 Answers1

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.

Heath
  • 76
  • 5