Jquery выбирается для выбора диапазона (поведение слайдера)

Question

Я хочу заменить ползунок списком значений и возможностью выбора диапазона.Я следовал за jquery selectable article, который предоставляет хороший вариант множественного выбора

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

Написал функцию, которая создает выбираемый из коллекции 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

Я выложил демо для этого решения: http://jsfiddle.net/snyuan/TGekT/, и http://jsfiddle.net/snyuan/Yrgnv/. Просто ссылка.

Answer 3

Если у вас есть несколько строк и вы хотите, чтобы каждая отдельная строка была объектом перетаскивания, просто наберите .selectable() в каждой строке. Я выложил демо для этого решения: http://jsfiddle.net/Nm69t/ (или отдельный просмотр страницы: http://jsfiddle.net/Nm69t/show)

Вы можете видеть, что я создал три списка (работая как три отдельные строки) и сделал выбор каждой строки, выполнив $('.selectable').selectable();

Надеюсь, это поможет.