6

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?

1 Answer 1

3

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.