How to implement toggle functionality on JQuery UI Selectable?

Question

I\'m using JQuery UI - Selectable. I want to deselect the element if it has been pressed and it has already been selected (toggle)

Could you help me to add this func

Answer 1

You already have that functionality with jQuery UI selectable if you're holding down the Ctrl key while clicking.

If you really need that as the default functionality, you don't need to use selectable, you can do it just as a simple onclick handler, like what nolabel suggested.

Or... you might as well edit jquery.ui.selectable.js and add an option which does just what you need. Shouldn't be too hard, there are 4 places where event.metaKey is checked, make sure if your option is set, just run the codepaths as if event.metaKey was always true.

As the selectables could use some more customisation, you could also make a feature request for jQuery UI developers to include it in the next official version.

Answer 2

Because of all the class callbacks, you're not going to do much better than this:

$(function () {
        $("#selectable").selectable({
            selected: function (event, ui) {
                if ($(ui.selected).hasClass('click-selected')) {
                    $(ui.selected).removeClass('ui-selected click-selected');

                } else {
                    $(ui.selected).addClass('click-selected');

                }
            },
            unselected: function (event, ui) {
                $(ui.unselected).removeClass('click-selected');
            }
        });
    });

Answer 3

You have to inject two simple elements in the code to achieve what you want. This just inverts the metaKey boolean, whenever you need inverted/toggle functionality.

options: {
    appendTo: 'body',
    autoRefresh: true,
    distance: 0,
    filter: '*',
    tolerance: 'touch',
    inverted: false /* <= FIRST*/
},

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

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

    if (this.options.disabled)
        return;

    var options = this.options;

    if (options.inverted) /* <= SECOND*/
        event.metaKey = !event.metaKey; /* <= SECOND*/