Выбор интерфейса jQuery, с выбором потока вместо выбора блока

Question

Я хочу использовать что-то похожее на пользовательский интерфейс jQuery Выбирается . Но он работает строго по перетаскиваемому прямоугольнику, и я хочу что-то, что работает с макетом потока (например, выделение текста).

В качестве примера, если я перейду к демонстрации «Выбираемый» в виде сетки », нажмите« 3 »и перетащите на« 6 », Выбираемый выбирает все в этом прямоугольнике:

Вместо этого я хочу, чтобы он выбирал все числа от 3 до 6. (Вероятно, следует также отключить прямоугольник из пунктирной линии, поскольку это не имеет смысла для этого типа выделения). (снова перетаскивая от 3 до 6):

У Selectable есть событие, которое запускается, когда элементы выбираются и отменяются при перетаскивании, но я не вижу способа изменить его список «какие элементы выбраны» из этого события или подключить пользовательский «how» я должен сказать, какие предметы должны быть выбраны? " Алгоритм.

Как я могу получить возможность выбора элементов по логическому порядку, а не по пиксельной позиции?

Answer 1

Я думаю, что это может помочь вам!

var indices = [];
$( "#selectable" ).selectable({
    selecting: function(event, ui) {
        indices.push($(ui.selecting).index());
        select();
    },
    unselecting: function(event, ui) {
        var index = $(ui.unselecting).index();
        for(var i = 0; i < indices.length; i++)
            if(indices[i] == index)
                indices.splice(i, 1);
        select();
    }
});

function select() {
    indices.sort(function(a,b){return a-b});
    var start = indices[0];
    var end = indices[indices.length - 1];
    $('#selectable li').removeClass('ui-selecting');
    $('#selectable li').filter(function() {
        return $(this).index() >= start && $(this).index() <= end;
    }).addClass('ui-selecting');
}

Answer 2

Я считаю, что это очень похоже на это

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

И чтобы скрыть окно рисования, вы добавляете это в свой CSS.ui-selectable-helper {видимость: скрыто;}

Answer 3

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