如何實現項目列表的橡皮筋選擇

我有一個項目列表，我需要通過拖動選擇來選擇多個項目。我試圖實現它。我的代碼無法正常工作。如何實現項目列表的橡皮筋選擇

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

我如何可以選擇使用頻段選擇多個項目？

我的需求是：

阻力帶在列表項。
，並選擇帶覆蓋的區域

來源

2012-12-14 user1834809

也向上拖動時，您的選擇是行不通的。 – Christoph

爲什麼重新發明輪子？谷歌它，並使用已有的圖書館。像這樣一個例子http://threedubmedia.com/code/event/drop/demo/selection – WTK

緩存查詢，男人。不要每次重複'$（this）.children（「。fmgrRubberBand」）'：將其保存到一個變量中並在需要時使用它。 – MaxArt

下的項目只需使用jQuery UI的可選插件。

這裏是工作演示。

Demo

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

來源

2012-12-15 07:13:20

如何實現項目列表的橡皮筋選擇

回答

相關問題