jQuery UI可选，使用流选择而不是框选择

Question

我想使用与jQuery UI Selectable类似的东西。但它严格按照拖动的矩形操作，我想要一些在流布局上运行的东西（比如选择文本）。

例如，如果我转到Selectable "display as grid" demo，请点击“3”，然后拖动到“6”，可选择选择该矩形中的所有内容：

我想要的是它选择从3到6的所有数字。（它也应该也禁用虚线矩形，因为它对这种类型的选择没有意义。）像这样（再次从3拖到6）：

Selectable有一个事件，它会在拖动过程中选择和取消选择项目时触发，但是我没有看到任何方法来改变该事件中的“选择了哪些项目”列表，或插入自定义“如何”告诉我应该选择哪些项目？“算法

如何通过逻辑顺序而不是按像素位置选择可选项？

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 selectable for range selection (slider behaviour)

要隐藏绘图框，请将其添加到css中 .ui-selectable-helper {    能见度：隐藏; }

Answer 3

我为此解决方案制作了一个演示：http://jsfiddle.net/snyuan/TGekT/和http://jsfiddle.net/snyuan/Yrgnv/。只是一个参考。