Question

我正在尝试使用空格+↓重新排序列表项以更改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 ， Alt 或移

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

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

Answer 2

这是不可能的。控制键的处理方式与其他键不同。按住Ctrl键的同时按住某个键，按下 ctrl键 事件以及随后的每次按键都会触发。（ 这可以通过注册在按下控制键时打印到控制台的事件以及在按下任何键时打印到控制台的事件来证明 ）。而空格键被视为普通键。空格键按下事件在您按下它时触发一次，按住任何后续按键将会忽略它并触发后一个键的按键事件。

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

2 个答案: