3

jQuery UI のSelectableに似たものを使いたいです。しかし、それはドラッグされた四角形で厳密に動作し、フローレイアウトで動作するものが必要です(テキストの選択など)。

例として、Selectable "display as grid" demoに移動し、"3" をクリックして "6" にドラッグすると、Selectable はその四角形内のすべてを選択します。

ここに画像の説明を入力

私が代わりに望むのは、3 から 6 までのすべての数字を選択することです (このタイプの選択には意味がないため、おそらく点線の長方形も無効にする必要があります)。 3 から 6 まで):

ここに画像の説明を入力

Selectable には、ドラッグ中にアイテムが選択および選択解除されたときに発生するイベントがありますが、そのイベントから「どのアイテムが選択されているか」リストを変更したり、カスタム「どのように伝えるか」をプラグインする方法はありませんどの項目を選択する必要がありますか?」アルゴリズム。

Selectable を取得して、ピクセル位置ではなく論理的な順序でアイテムを選択するにはどうすればよいですか?

4

2 に答える 2

2

私はそれがあなたを助けるかもしれないと思う!

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');
}
于 2013-01-25T02:16:34.917 に答える
0

このソリューションのデモを作成しました: http://jsfiddle.net/snyuan/TGekT/およびhttp://jsfiddle.net/snyuan/Yrgnv/。参考程度に。

于 2011-10-19T01:48:49.757 に答える