In jquery ui selectable widget, I noticed that you can select more than one item by holding ctrl (or by dragging a box), but how do you disable multi selecting. I only want to be able to select 1 at a time.
Thanks.
Add a comment
|
3 Answers
This is a fairly crude implementation: http://jsfiddle.net/rtRjK/
Basically, when an element is selected, first unselect the all its siblings that have been selected - this handles ctrl-clicks. Next, iterate over the siblings that are selecting and unselect them - this handles drags. As a consequence, dragging always takes the element with largest y-coordinate.
You can also roll your own selectable widget. I removed the ctrl key reference and _mouseDrag function from $.ui.selectable: http://jsfiddle.net/zFFXc/
1 Comment
Jim Speaker
The singleselectable plug-in is a whole lot cleaner. Up-voted this answer based on the "You can also..." portion as all the other answers I've read are hacky and not clean and professional UI. Cheers
selectable, single-select, with keyboard
//after load
$(function() {
// make <ol id=lista> selectable (jquery UI)
$("#lista").selectable();
$("#lista").children(":first-child").addClass("selected"); //select first
$(document).keydown(function(ev) { //con keyboard
var actual = $(".selected");
switch (ev.keyCode) {
case 13: // User pressed "enter" key
actual.dblclick();
ev.preventDefault();
break;
case 38: // User pressed "up" arrow
actual.prev().click();
ev.preventDefault();
break;
case 40: // User pressed "down" arrow
actual.next().click();
ev.preventDefault();
break;
}
}); //end keydown
//single select
$("#lista li").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
}); // end $(fn...
