Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用键盘事件(空格和向下箭头)对无序列表中的列表元素重新排序?_Javascript_Jquery_Wai Aria - Fatal编程技术网

Javascript 如何使用键盘事件(空格和向下箭头)对无序列表中的列表元素重新排序?

Javascript 如何使用键盘事件(空格和向下箭头)对无序列表中的列表元素重新排序?,javascript,jquery,wai-aria,Javascript,Jquery,Wai Aria,我正在尝试使用空格对列表项重新排序+↓ 在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 &

我正在尝试使用空格对列表项重新排序+↓ 在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键的同时按下某个键时,随后每次按下时都会触发按住ctrl键的事件。(这可以通过注册一个事件来演示,该事件在按下控制键时打印到控制台,在按下任何键时打印到控制台)。而空格键被视为普通键。按下空格键时会触发一次空格键按下事件,按住空格键后的任何后续按键都会忽略它并触发后一个键的按键事件。

这很棘手,因为空格键不会将键盘置于Ctrl、Alt或Shift等特殊状态

您可以通过侦听空格键,然后更改按键事件以侦听向上和向下箭头来执行此操作:

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

你试过JS吗?我没有看到任何代码,只有HTML标记。发布你自己的尝试怎么样,如果有的话……我已经用CTRL+向下箭头实现了。但我需要使用空格键+向下箭头。它已经用键盘实现了可访问的拖放功能。我希望不使用任何plugin.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();