Javascript 如何实现项目列表的rubberband选择

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

var拖动=false，rbt，rbl；
$（“.itemlist”）.bind（{“mousedown”：handleMouseDown，
“鼠标移动”：把手移动，
“mouseup”：handleMouseUp，}）；
功能手柄向下（e）{
var rubberband=$（“”）.addClass（“fmgrRubberBand”）.appendTo（本）；
rubberband.css({
上图：e.pageY，
左：e.pageX
});
rbt=e.pageX；
rbl=e.pageY；
拖动=真；
}
功能手柄移动（e）{
e、 预防默认值（）；
如果（拖动）{
var t=$（this）.children（“.fmgrRubberBand”）.offset（）.top；
var l=$（this）.children（“.fmgrRubberBand”）.offset（）.left；
如果（l

如何使用标注栏选择多个项目

我的需要是：

将标注栏拖到列表项上

并选择波段覆盖区域下的项目

---

只需使用jQueryUI可选插件

这里是工作演示

---

此外，向上拖动时，您的选择不起作用。为什么要重新设计轮子？谷歌它和使用图书馆已经有人。比如这个，缓存查询，伙计。不要每次都重复

$（this）。children（.fmgrRubberBand”）

：将其保存到变量中，并在每次需要时使用它。@christoph yah我的计算新提琴演示中有什么错误吗

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

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