Jquery selectable for range selection (slider behaviour)

I want to replace a slider with a list of values and an option to select the range. I followed the jquery selectable article, which provides a nice multi-select option

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

Since I only want range selection, I disabled the the Ctrl-click using the below code.

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

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

This disables ctrl-select, but I can still drag the mouse and select values that are not in the range.

开发者_如何学编程My list is laid out as a 4x4 matrix. Problem is I can drag my mouse and choose values in the same columns, which do not highlight the values in the adjacent columns under the same range. Is there any way out other than a single row?

---

If you have multiple rows and want each separate row to be a subject of drag-selecting, simply make .selectable() on each row. I put up a demo for this solution: http://jsfiddle.net/Nm69t/ (or separate page view: http://jsfiddle.net/Nm69t/show)

You can see, that I've created three lists (working as three separate rows) and made each of the row selectable by doing $('.selectable').selectable();

Hope it helps.

---

Wrote a function that creates a selectable from a namevalue collection. I am new to Jquery and Javascript so there is room for some fine tuning.

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){

         });

---

I put up a demo for this solution: http://jsfiddle.net/snyuan/TGekT/, and http://jsfiddle.net/snyuan/Yrgnv/. Just a reference.