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 !
2
-
2Did one of these answers help you out?two7s_clash– two7s_clash2011-08-26 19:48:18 +00:00Commented Aug 26, 2011 at 19:48
-
1Here's a method that works great - it make the default be as if the ctl key was pressed: stackoverflow.com/a/12592042/1017650Symmetric– Symmetric2014-07-31 21:27:45 +00:00Commented Jul 31, 2014 at 21:27
Add a comment
|
3 Answers
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');
}
});
});
3 Comments
James Smith
This is a very useful answer. Not sure why it hasn't been marked as the answer? Certainly worked for me.
Tony Topper
Is this going to fire the events as you would expect? I'd guess removeClass isn't going to fire the unselect event.
lubosdz
It works for toggle a single item. However it removes already selected multiple items - so not working for toggle multiple items.
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.
1 Comment
Jobst
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.
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*/
Comments
