如何使用键盘事件（Space + 向下箭头）对无序列表中的列表元素重新排序？

Question

我正在尝试使用 space+↓ 重新排序列表项以更改 JavaScript 中列表的顺序。请看下面的代码：

 <ul id="ulist">
  <li tabindex="0">item one </li>
  <li tabindex="0">item two </li>
  <li tabindex="0">item three </li>
  <li tabindex="0">item four </li> 
</ul>

我可以通过（CTRL + 向下箭头）

    $('li').keydown(function(e) {
  var li= $(this);
  if(e.ctrlKey) {
    switch(e.which) {
      case 38: li.insertBefore(li.prev()); break; //up
      case 40: li.insertAfter(li.next());  break; //down
    }
    li.focus();
  }
});

$('li').first().focus();

如何操作？

Answer 1

这不可能。控制键的处理方式与其他键不同。当您在按住 ctrl 键的同时按下一个键时，ctrl key pressed 事件会随着随后的每次按下而触发。（这可以通过注册一个在按下控制键时打印到控制台的事件和一个在按下任何键时打印到控制台的事件来演示).而 space 键被视为普通键。 space 按键事件在您按下时触发一次，按住它的任何后续按键将简单地忽略它并为后一个键触发按键事件。

Answer 2

这很棘手，因为 Space 栏 不会将键盘置于 Ctrl 等特殊状态，Alt，或Shift.

您可以通过侦听 Space 条 ，然后更改键事件以侦听向上和向下箭头来实现：

$('li').keyup(function(e) {
  if(e.which===32) $(this).unbind('keydown');
  $(this).keydown(function(e) {
    var li= $(this);
    if(e.which===32) {
      li.unbind('keydown');
      li.keydown(function(e) {
        switch(e.which) {
          case 38: li.insertBefore(li.prev()); break; //up
          case 40: li.insertAfter(li.next());  break; //down
        }
        li.focus();
      });
    }
  });
}).keyup();

Fiddle

如何使用键盘事件（Space + 向下箭头）对无序列表中的列表元素重新排序？

How to reorder list elements in unordered list using keyboard events ( Space + Down Arrow )?

javascript

jquery

wai-aria