Enable Shift-Multiselect in jQuery UI Selectable

You can do it without plugins like this:

var prev = -1; // here we will store index of previous selection$('tbody').selectable({    selecting: function(e, ui) { // on select        var curr = $(ui.selecting.tagName, e.target).index(ui.selecting); // get selecting item index        if(e.shiftKey && prev > -1) { // if shift key was pressed and there is previous - select them all            $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected');            prev = -1; // and reset prev        } else {            prev = curr; // othervise just save prev        }    }});

Here is live demo: http://jsfiddle.net/mac2000/DJFaL/1/embedded/result/

I wrote simple plugin for that functionality. It's not dependent on jQuery ui Selectable plugin and as far as i know works fine with it.

You can find plugin code and simple example here: http://jsfiddle.net/bMgpc/170/

Going to write simple description below.

Basic usage:

$('ul').multiSelect();

If you hold "Ctrl" or "Command Key" then you can select/unselect elements one by one.

ul - parent that holds inner elements to be selected.

There are number of options available:

• keepSelection - true|false - quite an important flag. If set to true (default), then selection won't be cleared if you click on already selected element (as it works in with multiple prop)
• multiselect - true|false -if false you can select only one element
• selected - 'selected' - class that will be added to selected element
• filter: - ' > *' - what elements are we going to select
• unselectOn - false|'selector' - if set then if clicked on set selector selectio would be removed
• start: false|function - callback on start
• stop: false|function - callback on stop
• unselecting: false|function - callback when clicked on set "unselectOn" option

It's a dev version plugin, so use with care

After looking around I was unable to find a solution to this problem while still using jQuery UI's Selectable function, so I wrote one up. Essentially it taps into the selected / unselected callbacks of Selectable to manage DOM state while still honoring the callbacks as per the standard Selectable API. It supports the following use case:

• Click one of the elements (shift+click, cntl+click, or click+drag also) anywhere in the list
• Shift+click another element in the list
• All elements between plus the two end points become selected

Usage for a table:

$('table').shiftSelectable({filter: 'tr'});

A few notes. (1) It currently only supports sibling elements. (2) It will pass through configuration options as you will see in the table example as well as the Selectable methods. (3) I heart underscore.js so it is used even though for this it is not essential. Feel free to swap out its simple checks and extends if you don't want to use this awesome library. And no, I have no affiliation with underscore.js. :)

table fiddle example

list fiddle example

Hope this helps someone else! Cheers.