Snippet: Shift + Click List Items with jQuery
主要的邏輯是記錄最後一個選擇的項目
$parentNode.delegate("li","click",function(event){ var $currLI = $(this); if($currLI.hasClass("select_this")){ //unselected $.console("[UserList.render] delegate:unselected user"); if(event.shiftKey){ //just unselected $currLI.removeClass("select_this"); }else{ //re-locate last selected/unselected $currLI.removeClass("select_this"); $currLI.addClass("last_selected"); $lastSelected.removeClass("last_selected"); //change last selected $lastSelected = $currLI; } }else{ //selected $.console("[UserList.render] delegate:selected user"); // // SHIFT + CLICK // var $shiftSelected = [];//record seleted items by shfit key if(event.shiftKey){ //shift + click logic if($lastSelected.length > 0){//first click if($lastSelected == $currLI){ $.console("[UserList.render] same selection"); return false; }else{ //detect foward or back direction = $currLI.nextAll(".last_selected").length > 0 ? "forward" : "back"; $.console("[UserList.render] last_selected count:" + $currLI.nextAll(".last_selected").length); $.console("[UserList.render] direction:" + direction); if(direction == "forward"){ $shiftSelected = $currLI.nextUntil($lastSelected); }else{ //back $shiftSelected = $lastSelected.nextUntil($currLI); } // $.console("$shiftSelected:" + $shiftSelected.length); $LICollection.removeClass("select_this");//reset pre selected //final selected items $shiftSelected.addClass("select_this");//highlight shift selected $lastSelected.addClass("select_this");//highlight last selected $currLI.addClass("select_this");//highlight current selected } }else{ $lastSelected = $currLI; $currLI.addClass("select_this last_selected"); } }else{ //record last selected $lastSelected = $currLI; $currLI.addClass("select_this last_selected"); } } //for debug // $.console("lastselected username:" + $lastSelected.find(".usr_name").html()); if(userlist.selecteEventHandler && typeof(userlist.selecteEventHandler) === "function"){ userlist.selecteEventHandler($currLI,userlist.getSelectedItems()); } });