Question

I have a list of items and I need to select multiple items by drag select. I was tried to implement it. my code not working properly.

Demo

var dragging=false,rbt,rbl;
$(".itemlist").bind({"mousedown":handleMouseDown,
                     "mousemove":handleMouseMove,
                     "mouseup":handleMouseUp,});



function handleMouseDown(e){
    var rubberband = $("<div/>").addClass("fmgrRubberBand").appendTo(this);
    rubberband.css({
        top : e.pageY,
        left : e.pageX
    });
    rbt = e.pageX;
    rbl = e.pageY;
    dragging=true;
}
function handleMouseMove(e){
    e.preventDefault();
    if (dragging) {
        var t = $(this).children(".fmgrRubberBand").offset().top;
        var l = $(this).children(".fmgrRubberBand").offset().left;
        if (l < e.pageX) {
            $(this).children(".fmgrRubberBand").css({
                "width" : e.pageX - l + "px"
            })
        } else {
            $(this).children(".fmgrRubberBand").css({
                "width" : rbl - e.pageX + "px",
                "left" : e.pageX
            });
        }
        if (t < e.pageY) {
            $(this).children(".fmgrRubberBand").css({
                "height" : e.pageY - t + "px"
            })
        } else {
            $(this).children(".fmgrRubberBand").css({
                "height" : rbt - e.pageY + "px",
                "top" : e.pageY
            })
        }

    }
        
}
function handleMouseUp(e){
    e.preventDefault();
                        
    dragging = false;

    $(this).children(".fmgrRubberBand").remove();
}

how can I select multiple items by using the band selection?

my needs are:

1. drag the band over list items.
2. and select the items under the band covered area

Answer 1

Just use jquery ui selectable plugin.

Here is working demo.

Demo

$(".itemlist").selectable({filter:"li"});