Jqueryui sorted by keyboard?

Question

I have a requirement to make the functionality of the application accessible from the keyboard, and not just with the mouse. The application uses jquery sorting to manage ordered lists. Can anyone suggest ideas on how to make sorting functions accessible from the keyboard? I am talking about the basic view using drag & drop, as shown in the example http://jqueryui.com/sortable . I have not seen anything mentioned in jqueryui / sortable, which is why I believe that the framework does not have built-in keyboard support. Also, are there any other java script frameworks that support the keyboard?

Answer 1

It’s good for this to work using the following:

• Added tabindex to all items in the list. This allows the user to add tabs to and through individual list items.

• The following js are added:

  $('.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)> 

Thus, the tab allows you to move and move around the items, while the arrows move the items up and down the list. It works, but, of course, it looks very primitive compared to dragging and dropping moving graphics when using the mouse. Wondering if I can revive the move, with reasonable efforts ...