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

jqueryuiの選択可能なプラグインを使用するだけです。

これが作業デモです。

デモ

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