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 !

Here's a method that works great - it make the default be as if the ctl key was pressed: http://stackoverflow.com/a/12592042/1017650 — Symmetric, Jul 31 '14 at 21:27

score 22 · Accepted Answer · answered Apr 19 '11 at 16:52

22

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

answered Apr 19 '11 at 16:52

two7s_clash

5,755
1
27
44

2

This is a very useful answer. Not sure why it hasn't been marked as the answer? Certainly worked for me. – James Smith Aug 24 '11 at 10:51
2

Is this going to fire the events as you would expect? I'd guess removeClass isn't going to fire the unselect event. – Tony Topper Jun 07 '13 at 21:05
It works for toggle a single item. However it removes already selected multiple items - so not working for toggle multiple items. – lubosdz Sep 28 '16 at 09:13

score 1 · Answer 2 · answered Apr 19 '11 at 15:44

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.

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. — Jobst, Apr 22 '15 at 04:27

score 0 · Answer 3 · answered Nov 22 '11 at 11:56

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

How to implement toggle functionality on JQuery UI Selectable?

3 Answers3

Linked