selecting multiple elements using shift and mouse click - jquery

Question

Is it possible to use shift and mouse click to select multiple elements on a page using jquery?

I have several divs that i have given a tabindex to so that i can select them and can do things like delete them etc.

I want to be able to select more than 1 by holding down shift and using the mouse to click on each div and am struggling to do this.

Does anyone know how this can be done?

Answer 1

I did something like that some time ago, with jQuery:

$(id).click(function(event){    //Mouse Click+shift event 
        if(event.shiftKey){
                     //give some attribute that can indentify the elements of the selection
                     //example rel='multi-selection' or class='multi-selection'
        }
});

Then you should do functions that select this elements and do whatever you need, I used this to drag multiple elements. Example if you want to delete this divs, you can for example:

function deleteMultiSelection(){
    $('html').find('div[rel=multi-selection']).each(function(){
          $(this).remove();
     })

} 

$("#button").click(function(){
    deleteMultiSelection();
})

Be careful because I didn't test this code.

Answer 2

I have a jQuery plugin that does exactly what you want it is called finderSelect it enables Shift+Click, Ctrl+Click, Ctrl+Click+Drag and Standard Clicking on any element.

Answer 3

It sounds like jQuery UI Selectable is what you're after, you can try it out here.

To stay with OS conventions, they key it uses is Ctrl and not Shift, this isn't an option you can change without changing the jQuery UI code itself. It also has the feature of click and drag over elements to get a rectangular selection as well...if that's of any use.