How to select multiple items using mouse click?

Question

This is the default jQueryUI display as a Grid Layouts (demo here). I can select one at a time when using mouse pointer. I have to use Ctrl for multiple selections. How will I edit the code for multiple selections at once using just the mouse pointer?

CSS

<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; }
    #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>

JavaScript

<script>
    $(function() {
        $( "#selectable" ).selectable();
    });
</script>

HTML

 <div class="demo"> 
   <ol id="selectable">
     <li class="ui-state-default">1</li>
     <li class="ui-state-default">2</li>
     <li class="ui-state-default">3</li>
     <li class="ui-state-default">4</li>
     <li class="ui-state-default">5</li>
     <li class="ui-state-default">6</li>
     <li class="ui-state-default">7</li>
     <li class="ui-state-default">8</li>
     <li class="ui-state-default">9</li>
     <li class="ui-state-default">10</li>
     <li class="ui-state-default">11</li>
     <li class="ui-state-default">12</li>
   </ol>
 </div><!-- End demo -->
 
 <div class="demo-description">
   <p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
 </div><!-- End demo-description -->

I don't understand what are you talking about ? can you give me the code using jsfiddle.net — underscore
– underscore, Commented Aug 18, 2012 at 16:34
Since you know about jsFiddle, it would be a good idea if you put the code there for everyone ;-) — andyb
– andyb, Commented Aug 18, 2012 at 16:38
"How will I edit the code for multiple selections at once using just the mouse pointer?" <-- What does that mean? What are you trying to do? Style the selected items different? Do something with the selected items? — lbstr
– lbstr, Commented Aug 18, 2012 at 16:39

ygssoni · Accepted Answer · 2012-08-18 17:12:36Z

8

Found This Code Online. Is that what you are asking for?

Multiple Select With Ctrl

edited Aug 18, 2012 at 17:12

answered Aug 18, 2012 at 16:53

ygssoni

7,3792 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ted Over a year ago

And what is the big difference with jqueryui.com/demos/selectable/#display-grid ?

ted Over a year ago

You've got +20, that is definitely bigger +15 ;)

Community · Accepted Answer · 2020-06-20 09:12:55Z

To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?

However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?

It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've come up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but demo here.

JavaScript

var $currentlySelected = null;
var selected = [];

$('#selectable').selectable({
    start: function(event, ui) {
        $currentlySelected = $('#selectable .ui-selected');
    },
    stop: function(event, ui) {
        for (var i = 0; i < selected.length; i++) {
            if ($.inArray(selected[i], $currentlySelected) >= 0) {
              $(selected[i]).removeClass('ui-selected');
            }
        }
        selected = [];
    },
    selecting: function(event, ui) {
        $currentlySelected.addClass('ui-selected'); // re-apply ui-selected class to currently selected items
    },
    selected: function(event, ui) {
        selected.push(ui.selected); 
    }
});

ted · Accepted Answer · 2012-08-18 17:09:22Z

1

http://jqueryui.com/demos/button/#checkbox Looks like the thing you are looking for

answered Aug 18, 2012 at 17:09

ted

5,3497 gold badges39 silver badges65 bronze badges

10 Comments

underscore Over a year ago

yeah.I want to use this select functions for my given demo .How to do that ?

ted Over a year ago

Actually that's not as easy as it may seem to you. JQueryUI lib method should be remade.

ted Over a year ago

@Samitha, stolen from Kakarott and changed to newer version of jquery =) jsfiddle.net/ZfevM/100

ygssoni Over a year ago

Let me guess what is changed..NOTHING !!

ted Over a year ago

@kakarott, actually there is some change that made it work for me. Don't be angry, all credits, as the correct answer should be yours ;)

|

Collectives™ on Stack Overflow

How to select multiple items using mouse click?

CSS

JavaScript

HTML

3 Answers 3

2 Comments

JavaScript

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

CSS

JavaScript

HTML

3 Answers 3

2 Comments

JavaScript

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related