javascript - 如何实现项目列表的橡皮筋选择

Question

我有一个项目列表，我需要通过拖动选择来选择多个项目。我试图实现它。我的代码无法正常工作。

演示

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();
}

如何使用波段选择来选择多个项目？

我的需求是：

1. 将乐队拖到列表项上。
2. 并选择带覆盖​​区域下的项目

Answer 1

只需使用 jquery ui 可选插件。

这是工作演示。

演示

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