Search jQuery

jQuery Forum

UI Selectable - allow select multiple without lasso?

in Using jQuery UI • 2 years ago

The default behavior deselects selected items if you individually click on them. It will allow multiple items to be selected with a lasso, but I'd like to be able to click on individual items, and have them all continue to toggle selected.

I don't see any options or methods to keep a previously clicked on item as selected after clicking on another item?

Replies(3)

scottmarcy

Re: UI Selectable - allow select multiple without lasso?

1 year ago

This makes Selectable completely unusable on a touch device, where you can't lasso and don't have a ctrl key.

scottmarcy

Re: UI Selectable - allow select multiple without lasso?

1 year ago

So here's what I came up with. It works, but I'm really new to this stuff, so there's probably something wrong here. The trick is to add some kind of attribute to track the "real" selection state independently of the Selectable code. I just toggle the "my-selected" class and force the "ui-selected" class to match "my-selected". It causes some flashing, but I can live with that for now. I suspect I could turn off autoRefresh and force the refresh myself to improve the drawing.

$(".selectable").selectable({
selected: function(event, ui) {
var e = $(ui.selected);
if (e.hasClass("my-selected")) {
e.removeClass("my-selected");
e.removeClass("ui-selected");
} else {
e.addClass("my-selected");
e.addClass("ui-selected");
}
},
unselected: function(event, ui) {
var e = $(ui.unselected);
if (e.hasClass("my-selected")) {
e.addClass("ui-selected"); // Restore the selection
}
},
});

Croykee

Re: UI Selectable - allow select multiple without lasso?

1 year ago

The flashing will occur only because unselected is done after the unselection. You require the unselecting event to accompany your solution. This will work like checking/unchecking checkboxes, except you can still use click and drag like you normally would for selectable, making it a breeze to make multiple selections quickly.

            /* Instantiate jQuery Selectable */
            $('.selectable').selectable({
               selected: function (event, ui) {
                var e= $(ui.selected);
                if (e.hasClass('my-selected')) {
                        e.removeClass('my-selected');
                        e.removeClass('ui-selected');
              } else {
                        e.addClass('my-selected');
                        e.addClass('ui-selected');
                }
            },
            unselected: function (event, ui) {
                var e= $(ui.unselected);
                if (e.hasClass('my-selected')) {
                    e.addClass('my-selected');
                    e.addClass('ui-selected');
                } else {
                    e.removeClass('ui-selected');
                    e.removeClass('my-selected');
                }
            },
            unselecting: function (event, ui) {
                var e= $(ui.unselecting);
                if (e.hasClass('my-selected')) {
                    e.addClass('ui-selected');
                    e.addClass('my-selected');
                } else {
                    e.removeClass('ui-selected');
                    e.removeClass('my-selected');
                }
            }
         }); // End $('.selectable').selectable