Jquery可選範圍選擇（滑塊行爲）

Question

我想用一系列值替換一個滑塊並選擇一個範圍選項。我跟着jQuery的選擇文章，它提供了一個很好的多選選項

http://jqueryui.com/demos/selectable/#display-grid

因爲我只想範圍選擇，我禁用使用下面的代碼在按住Ctrl鍵。

$("#selectable").bind("mousedown", function (e) { 
      e.metaKey = false; 
      }).selectable(); 

http://forum.jquery.com/topic/disabling-ctrl-click-on-jquery-ui-selectable

這將禁用CTRL-選擇，但我仍然可以將不屬於該範圍內的鼠標並選擇值。

我的清單是按照4x4的矩陣排列的。問題是我可以拖動我的鼠標，並選擇相同列中的值，這些值不會突出顯示相同範圍下相鄰列中的值。除了單行之外還有什麼出路嗎？

Answer 1

寫了一個函數，該函數創建一個可從namevalue集合中選擇的函數。我是Jquery和Javascript的新手，所以有一些微調的空間。

function NameValue(name, value) { 
     this.name = name; 
     this.value = value; 
    } 

    function createRangeSelectable(elementName, nameValueCollection, functionReference) { 
      var newElementId = "selectable" + elementName; 
     var orderedListHTML = "<ol id='" + newElementId + "' class='selectable'>"; 
     var itemHTML = ""; 

     for (x in nameValueCollection) { 
      var item = nameValueCollection[x]; 
      itemHTML = itemHTML + "<li class='ui-state-default'>" + item.name + "<input type='hidden' value='" + item.value + "'/></li>"; 
     } 

     orderedListHTML = orderedListHTML + itemHTML + "</ol>" 

     $("#" + elementName).html(orderedListHTML); 


     $("#" + newElementId).bind("mousedown", function (e) { 
      e.metaKey = false; 
     }).selectable({ 

      stop: function() { 
       var first = -1; 
       var last = -1; 

       $(".ui-selected", this).each(function() { 

        var index = $("li", this.parentElement).index(this); 
        if (first == -1) 
         first = index 
        last = index 
       }); 

       var firstListItemValue; 
       var lastListItemValue; 

       $("li", this).each(function() { 


        var index = $("li", this.parentElement).index(this); 
        if (index == first) { 
         firstListItemValue = $(this).children('input').val(); 
        } 
        if (index == last) 
         lastListItemValue = $(this).children('input').val(); 

        if (index > first && index < last) 
         if (!$(this).hasClass("ui-selected")) 
          $(this).addClass("ui-selected"); 
       }); 

       functionReference(firstListItemValue, lastListItemValue); 
      } 

     }); 

//Usage 

createRangeSelectable("YourDivId", NameValueArray, function(startValue, endValue){ 

     }); 

Answer 2

如果您有多個行，並希望每個單獨的行都是拖動選擇的主題，則只需在每行上設置.selectable()即可。我把這個解決方案演示：http://jsfiddle.net/Nm69t/（或單獨的頁面視圖：http://jsfiddle.net/Nm69t/show）

你可以看到，我已經創建了三個列表（工作作爲三個獨立的行）並取得各行的選擇做$('.selectable').selectable();

希望它有幫助。

Answer 3

我提出了一個演示此解決方案：http://jsfiddle.net/snyuan/TGekT/和http://jsfiddle.net/snyuan/Yrgnv/。只是一個參考。