jQuery UI selectable, with flow selection instead of box selection

Question

I want to use something similar to jQuery UI's Selectable. But it operates strictly on a dragged rectangle, and I want something that operates on a flow layout (like selecting text).

As an example, if I go to the Selectable "display as grid" demo, click on "3", and drag to "6", Selectable selects everything in that rectangle:

What I want instead is for it to select all the numbers from 3 to 6. (It should probably also disable the dotted-line rectangle as well, since it doesn't make sense for this type of selection.) Like this (again dragging from 3 to 6):

Selectable has an event that it fires as items are selected and deselected during the drag, but I don't see any way to alter its "which items are selected" list from that event, or to plug in a custom "how do I tell which items should be selected?" algorithm.

How can I get Selectable to select items by logical order instead of by pixel position?

Answer 1

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

Answer 2

i think it may help you!

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');
}