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 functionality please !

Georgetown

Did one of these answers help you out? – Sloppy

Here's a method that works great - it make the default be as if the ctl key was pressed: https://mcmap.net/q/756900/-jquery-ui-selectable-unselect-selected-item-on-click – Cyanocobalamin

Answer 1

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');
            }
        });
    });

Sloppy

This is a very useful answer. Not sure why it hasn't been marked as the answer? Certainly worked for me. – Moderate

Is this going to fire the events as you would expect? I'd guess removeClass isn't going to fire the unselect event. – Oahu

It works for toggle a single item. However it removes already selected multiple items - so not working for toggle multiple items. – Adiana

Answer 2

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.

Novobiocin

While I agree that you have the function on PC's and devices that have a ctrl key, you do NOT have that function when using touch devices - therefore it is a very good idea and it is not a double up but rather an addition or extension. – Regeneration

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*/

Assyriology