jquery-ui-selectable - jQuery UI 可选，带有流选择而不是框选择

Question

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

例如，如果我进入Selectable “display as grid” 演示，单击“3”，然后拖动到“6”，Selectable 会选择该矩形中的所有内容：

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

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

如何让 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

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