jquery-ui - jqueryui 可以用键盘排序吗?

标签 jquery-ui keyboard jquery-ui-sortable

我需要通过键盘访问应用程序功能,而不仅仅是鼠标。该应用程序使用 jquery sortable 来管理有序列表。任何人都可以提出如何通过键盘提供排序功能的想法吗?我正在谈论通过拖放进行的基本排序,如 http://jqueryui.com/sortable 上的示例所示.我没有看到 jqueryui/sortable 上提到的任何内容,这让我相信该框架没有内置的键盘支持。
或者,是否还有其他支持键盘的 java 脚本排序框架?

最佳答案

使用以下方法可以使其正常工作:

  • 向列表中的所有项目添加了 tabindex。这允许用户使用 Tab 键访问并浏览单个列表项。
  • 添加了以下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)>
    

  • 因此,Tab 键允许导航到项目并在其中移动,而箭头可在列表中上下移动项目。
    它可以工作,但与使用鼠标时的拖放移动图形相比,当然看起来非常原始。
    想知道我是否可以以合理的努力为移动设置动画...

    关于jquery-ui - jqueryui 可以用键盘排序吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16844616/

    相关文章:

    jQuery:可拖动连接到可排序。可拖动项目与可排序列表具有不同的 DOM

    javascript - 许多 jquery ui 对话框

    c# - 使用 C# 和 Win API 移动屏幕键盘 (osk.exe)

    javascript - 限制用户选择 jQuery 日期选择器以外的日期

    javascript - 文本区域中的移动数字键盘 [0-9]

    javascript - 为什么 Javascript IF keyCode === Enter 键或空格键不能与 NVDA 屏幕阅读器一起使用?

    javascript - JQuery 复制/追加元素,已删除基础对象

    javascript - AngularJs AngularUI 可排序模型链接到特定字段

    jquery-ui - Jquery UI slider - Tubeplayer 插件的 Seekbar

    javascript - 歌曲的进度条