how to select divs with jquery like for example in photoshop ? (select area)

Question

hello, have some divs, on some positions. i want select them with mouse, like when are you selecting object in photoshop. so i want to select group of divs. is that possible with jquery ? thanks

Answer 1

You can simulate a selected effect by changing the classes of the divs, e.g.:

$('div.selectable').click(function() {
    $(this).addClass('.selected');
});

If you want the div to get unselected after is has been clicked again, you can do something like:

$('div.selectable').click(function() {
    if($(this).is('.selected')) {
        $(this).removeClass('.selected');
    } else {
        $(this).addClass('.selected');
    }
});

or more concisely with the ternary operator:

$('div.selectable').click(function() {
    var $div = $(this);
    $div.is('.selected') ? $div.removeClass('.selected') : $div.addClass('.selected');
});

Answer 2

You can use the imgAreaSelect plugin as the base of your code.

Answer 3

There's jQuery Drag to Select, which will probably solve your problems.