0

並べ替え可能なプラグインを使用して並べ替え可能な順序付けられていないリストがあります。

キーボードのサポートを提供していないため、上/下の矢印キーでリストをナビゲートできるようにすることから始めて、このためのカスタム関数を追加し始めました。

tabindex を追加するとアイテムをタブで移動できますが、上下の矢印を使用すると複数のリスト アイテムにまたがってジャンプすることになります。

テスト用の境界線の色をいくつか設定しましたが、前と次の項目が正しく選択されていないことがわかります。

次のページのリストにタブで移動し、矢印キーを使用してみてください...

http://jsfiddle.net/qYvNq/

$(document).ready(function(){

  $("ul#sortable").sortable();

    $("ul#sortable li").focus(function() {

        $(this).css("border-color","red");

        $previtem = $(this).prev('li');
        $previtem.css("border-color","aqua");

        $nextitem = $(this).next('li');
        $nextitem.css("border-color","lime");

        $(this).keydown(function(e){
            if (e.keyCode == 40) { /* Focus Down */
                $nextitem.focus();
                return false;
            } else if (e.keyCode == 38) { /* Focus Up */
                $previtem.focus();
                return false;
            }
        });

    });

});
4

2 に答える 2

1

次のように、キーダウン ブロックをフォーカス ブロックの外に移動する必要があります。

$(document).ready(function(){
    var $previtem,
        $nextitem;

    $("ul#sortable").sortable();

    $("ul#sortable li").focus(function() {

        $(this).css("border-color","red");  

        $previtem = $(this).prev('li');
        $previtem.css("border-color","aqua");

        $nextitem = $(this).next('li');
        $nextitem.css("border-color","lime");
    });

    $("ul#sortable").keydown(function(e){
        if (e.keyCode == 40) { /* Focus Down */
            $nextitem.focus();
            return false;
        } else if (e.keyCode == 38) { /* Focus Up */
            $previtem.focus();
            return false;
        }
    });     
});

もちろん、リスト項目をドラッグした後は、順序が異なるため、前後の項目をリセットする必要があります。

于 2013-05-05T15:51:35.270 に答える