Jquery可选择范围选择（滑块行为）

我想用一个值列表替换一个滑块，并选择一个选项来选择范围。 我按照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-select，但我仍然可以拖动鼠标并选择不在范围内的值。

我的列表是4×4矩阵。 问题是我可以拖动鼠标并在同一列中选择值，这些列不会突出显示相同范围内相邻列中的值。 除了一排之外还有什么出路吗？

Answer 1

如果您有多行并希望每个单独的行都成为拖动选择的主题，则只需在每一行上创建.selectable() 。 我为这个解决方案设置了一个演示： http ： //jsfiddle.net/Nm69t/ （或单独的页面视图： http ： //jsfiddle.net/Nm69t/show ）

你可以看到，我已经创建了三个列表（作为三个单独的行）并通过执行$('.selectable').selectable();使每个行可选择$('.selectable').selectable();

希望能帮助到你。

Answer 2

编写了一个从namevalue集合中创建可选择的函数。 我是Jquery和Javascript的新手，因此有一些微调空间。

 function NameValue(name, value) { this.name = name; this.value = value; } function createRangeSelectable(elementName, nameValueCollection, functionReference) { var newElementId = "selectable" + elementName; var orderedListHTML = "
"; var itemHTML = ""; for (x in nameValueCollection) { var item = nameValueCollection[x]; itemHTML = itemHTML + "
" + item.name + "
"; } orderedListHTML = orderedListHTML + itemHTML + "
" $("#" + 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 3

我为这个解决方案设置了一个演示： http ： //jsfiddle.net/snyuan/TGekT/ ，和http://jsfiddle.net/snyuan/Yrgnv/ 。 只是一个参考。