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

【问题标题】：Jquery selectable for range selection (slider behaviour)Jquery 可选择范围选择（滑块行为）
【发布时间】：2011-09-06 09:54:17
【问题描述】：

我想用值列表和选择范围的选项替换滑块。我关注了 jquery 可选文章，它提供了一个不错的多选选项

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

因为我只想要范围选择，所以我使用下面的代码禁用了 Ctrl-click。

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

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

这会禁用 ctrl-select，但我仍然可以拖动鼠标并选择不在范围内的值。

我的列表是一个 4x4 矩阵。问题是我可以拖动鼠标并选择相同列中的值，这不会突出显示同一范围下相邻列中的值。除了单排还有什么办法吗？

【问题讨论】：

你能给我们展示一个演示页面吗？因为，对我来说，对正在发生的事情的描述有点模糊。
我会尝试在某个时间放置一个页面。简而言之，我想像范围选择器一样单击并拖动可选列表。如果您有单行但多行（矩阵）存在问题，则现有功能可以正常工作

标签： jquery jquery-ui

【解决方案1】：

如果您有多行并且希望每个单独的行成为拖动选择的主题，只需在每行上添加.selectable()。我为此解决方案提供了一个演示：http://jsfiddle.net/Nm69t/（或单独的页面视图：http://jsfiddle.net/Nm69t/show）

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

希望对你有帮助。

【讨论】：

不，这对我不起作用。它应该是一个单一的范围列表。我可以选择从 1 行到 n 行的范围。
所以我不明白，真的。你有一个 4x4 矩阵。您想摆脱可以拖动以选择多个项目的功能吗？或者您是否希望能够拖动选择，例如第三列，并且您希望选择从左到该列的所有项目？
我想要后者。单击一个元素并一直拖动以选择整个范围。所以我点击单元格（1R，1C）并垂直拖动到单元格（2R，1C），它应该选择范围（1R，2C）（1R，3C），（1R，4C）中的所有
Aaaah，现在我明白了：D 可以做到。我想通过处理选择停止后触发的事件，而不是手动计算和选择假设被选中的单元格。我将尝试提出一个可行的示例。
我已经完成了一半jsfiddle.net/Nm69t/2 唯一要做的就是摆脱释放鼠标按钮后设置的默认选择。老实说，完全摆脱 jQuery selectable 会容易得多，因为无论如何我都模拟了选择功能。

【解决方案2】：

编写了一个从名称值集合中创建可选项的函数。我是 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){

         });

【讨论】：

【解决方案3】：

我为此解决方案提供了一个演示：http://jsfiddle.net/snyuan/TGekT/ 和 http://jsfiddle.net/snyuan/Yrgnv/。仅供参考。

【讨论】：

这更像是一条评论，除非您展开链接