1

In Jquery UI selectable plugin, I want to be able to select multiple cells in different portions of a massive table grid. Normally, clicking on one item will deselect other items, unless the user also holds down a modifier key. You can see this behavior on the jQuery Selectable demo. How can I prevent deselection of highlighted cells on mouse up without using the keyboard?

outis
  • 75,655
  • 22
  • 151
  • 221
Deepa Thalikar
  • 129
  • 1
  • 3
  • 16
  • An example - on [jsfiddle](http://www.jsfiddle) for instance - would be much easier for us to picture your problem. – Didier Ghys Mar 09 '12 at 21:36
  • 2
    Documentation says "Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. " – Selvakumar Arumugam Mar 09 '12 at 21:37
  • @Didier Ghys- what I want is here:http://jqueryui.com/demos/selectable/#display-grid except that it deselects previous selection on mouse up and selecting a new cell. – Deepa Thalikar Mar 09 '12 at 21:58
  • 1
    Multiple selections can be achieved *... while holding the Ctrl/Meta key, [allowing for multiple (non-contiguous) selections].* – Didier Ghys Mar 09 '12 at 22:00
  • @Didier Ghys, I want it to be possible using mouse as well as keyboard events. Sorry for not mentioning it earlier. – Deepa Thalikar Mar 09 '12 at 22:10
  • possible duplicate of [Jquery Selectable without holding control](http://stackoverflow.com/questions/4999789/jquery-selectable-without-holding-control) – Didier Ghys Mar 09 '12 at 22:13
  • possible duplicate of ["Warning: Cannot modify header information - headers already sent by" error](http://stackoverflow.com/questions/1912029/warning-cannot-modify-header-information-headers-already-sent-by-error) – outis Mar 10 '12 at 16:29
  • @DeepaThalikar: Clarifications should be edited into the question, rather than in comments. For one thing, a question should be understandable without reading comments. For another, SO is a QA & site, not a forum, and comments aren't intended (nor are they well suited) for discussions. – outis Mar 10 '12 at 16:30

1 Answers1

3

One possible solution:

<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 type="text/javascript">
    $(function() {
        $("#selectable").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            stop: function() {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                });
            }
        });
    });
</script>

<p id="feedback">
    <span>You've selected:</span> <span id="select-result">none</span>.
</p>

<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>
r0m4n
  • 3,474
  • 3
  • 34
  • 43