This article shows you the code required to have only one selecteable item selected and multiple drag selected.
Assume we have all required scripts included in the <head> section and we have the following HTML code:
<div class="demo"> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> </ol> </div>
If you want ONE item ONLY selected at a time you need to include the following javascript/jquery:
<script type="text/javascript" >
jQuery(document).ready(function(){
jQuery("#selectable").selectable({
selected: function(event, ui){
$(ui.selected).addClass('ui-selected').siblings().removeClass('ui-selected');
},
});
});
</script>
If you want multiple items selected using the mouse, e.g. left button mousedown – drag mouse – left button mouseup then you need to include the following jquery/javascript.
<script type="text/javascript" >
jQuery(document).ready(function(){
$('#selectable').bind('mousedown', function(e) {
e.metaKey = true;
}).selectable();
$("#selectable").selectable();
});
</script>
NOTE: both javascript are mutually exclusive, you cannot have both – it would not make sense anyway.