jquery.ui.selectable.shift

jQuery UI selectable and Shift key example

by mac2000

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css">
<table class="table">
    <thead>
        <tr><th>idx</th><th>val</th></tr>
    </thead>
    <tbody>
        <tr><td>0</td><td>zero</td></tr>
        <tr><td>1</td><td>one</td></tr>
        <tr><td>2</td><td>two</td></tr>
        <tr><td>3</td><td>three</td></tr>
        <tr><td>4</td><td>four</td></tr>
        <tr><td>5</td><td>five</td></tr>
    </tbody>
</table>

CSS

.ui-selected {
    background-color:#eee;
}

JavaScript

var prev = -1;
$('tbody').selectable({
    selecting: function(e, ui) {
        var curr = $(ui.selecting.tagName, e.target).index(ui.selecting);
        if(e.shiftKey && prev > -1) {
            console.log(prev, curr, Math.min(prev, curr));
            $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected');
            prev = -1;
        } else {
            prev = curr;
        }
    }
});