26

can anyone help me use the jquery ui selectable library to perform the following functions:

  • Allow a user to select multiple items with a mouse click
  • De-select an item if it is already selected with a mouse click
HBCondo
  • 895
  • 3
  • 10
  • 26

5 Answers5

56

This is worked around in another question, but I'm reposting here for anyone who finds this via google. If you bind the "mousedown" event in jQuery and set metaKey there (as if the user is holding the ctrl/cmd key), then when you call selectable, it will already be set. 

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();
Community
  • 1
  • 1
Eric Skiff
  • 796
  • 6
  • 6
  • wow, only one line of code and voila! prior to posting this question i did a search with all questions with the jquery-ui-selectable tag. the other question you have a link to doesn't have the jquery-ui-selectable tag so i never saw it. – HBCondo Jan 15 '11 at 05:54
  • @Jobst So you got it working? I can't get it to work. Did you have to tweak anything? – Tech Savant Aug 26 '15 at 09:48
2

Doesn't use Selectable but this will get you the behavior you want with the setup you already have:

instead of

$( "#selectable" ).selectable()

try

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});
YSC
  • 38,212
  • 9
  • 96
  • 149
timbroder
  • 858
  • 1
  • 13
  • 25
  • 1
    without any context, this is no real answer ... just a passively-aggressive rant against selectable - you could've at least provided a full, working example ... takes only 2 minutes – specializt Sep 04 '13 at 23:12
0

use this code may be ot helps you 

  $('#selectable').bind("mousedown", function (e) {
      e.metaKey = true;    
 }).selectable('filter : td')​

if you are using the selectable on table for td's the use selectable('filter : td')​ else

use selectable()​

Rahul Kumar
  • 528
  • 1
  • 3
  • 19
0

Have you checked the demo page for selectable? You can already do this. To select multiple items, just hold control. This is similar to how you would work with files. Is using "Ctrl+Click" not good enough?

Demo Code Here:

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>

<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>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div>
JasCav
  • 34,458
  • 20
  • 113
  • 170
  • 3
    my requirements are to implement multi-select functionality using the mouse only, no keyboard. – HBCondo Dec 14 '10 at 22:29
  • @user327066 - I'll take a look at it over lunch if I get a moment. I'm pretty sure it can be modified to do what you want to do. – JasCav Dec 15 '10 at 16:30
  • thank you, i meant to say in my original comment that users should be able to use the mouse or keyboard to make multiple selections. therefore, it's okay to preserve exising keyboard functionality. we just need the same multi-select capabilities using only a mouse. – HBCondo Dec 17 '10 at 00:08
  • Well, then try that on a tablet device. Even with "jQuery UI Touch Punch" you cannot select multiple item in a selectable list (is Apple the new IE?) but with the suggested option of Eric you can. – Jobst Apr 22 '15 at 06:31
0

Take a look at my answer on this thread.

jQuery UI selectable - making multiple select default

It includes the full code replacement for the selectable ui js as well as outlining the changes needed, making this an option that can be passed.

Community
  • 1
  • 1
passion4code
  • 133
  • 1
  • 4