Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jqueryui sortable with keyboard?

I have a requirement to make the application functionality accessible through keyboard, not just the mouse. The application uses jquery sortable to manage ordered lists. Can anyone suggest ideas how to make the sorting functionality available through keyboard? I'm talking basic sort through drag&drop as ilustrated by the example on http://jqueryui.com/sortable. I have not seen anything mentioned on jqueryui/sortable which makes me believe the framework has no built-in support for keyboard. Alternatively, are there any other java script sort frameworks that support keyboard?

like image 829
Ya. Avatar asked May 30 '13 19:05

Ya.


1 Answers

Well got it to work by using the following:

  1. Added tabindex to all items in the list. This allows the user to tab to and through the individual list items.

  2. added the following 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)>
    

So tabbing allows to navigate to and move through the items while arrows move the items up and down the list. It works but ofcourse looks very primitive when compared with the drag and drop moving graphics when using the mouse. Wondering if I could animate the move, at a reasonable effort...

like image 58
Ya. Avatar answered Jan 04 '23 07:01

Ya.