jquery-ui - キーボードでソート可能なjqueryui?

Question

マウスだけでなく、キーボードからアプリケーション機能にアクセスできるようにする必要があります。アプリケーションは jquery sortable を使用して順序付きリストを管理します。並べ替え機能をキーボードから利用できるようにする方法を誰かが提案できますか? http://jqueryui.com/sortableの例で示されているように、ドラッグ＆ドロップによる基本的な並べ替えについて話しています。フレームワークにキーボードのサポートが組み込まれていないと思わせる jqueryui/sortable に関する言及は見たことがありません。または、キーボードをサポートする他の Java スクリプト ソート フレームワークはありますか?

Answer 1

以下を使用してうまく動作するようになりました：

1. リスト内のすべての項目に tabindex を追加しました。これにより、ユーザーはタブを使用して個々のリスト項目に移動できます。

2. 次のjsを追加しました：

   $('.sortable li').focus(function() {
      $(this).addClass("ui-selecting");
   }); 
   $('.sortable li').focusout(function() {
      $(this).removeClass("ui-selecting");
   }); 
   
   
   $('.sortable li').bind('keydown', function(event) {
         ...
   
        if(event.which == 38) //up
           pseudocode:
            <current.text := previous.text>
            <current.data := previous.data>
            <previous.text := current.text>
            <previous.data := current.data>
   
            <set_focus(previous)>
   
        if(event.which == 40)
           pseudocode:
            <current.text := next.text>
            <current.data := next.data>
            <next.text := current.text>
            <next.data := current.data>
   
            <set_focus(next)>
   

そのため、タブを使用するとアイテムにナビゲートして移動でき、矢印を使用するとアイテムがリスト内で上下に移動します。それは機能しますが、マウスを使用したときのドラッグアンドドロップの移動グラフィックスと比較すると、もちろん非常に原始的に見えます。適度な努力で、動きをアニメーション化できるかどうか疑問に思っています...