如何使用鍵盤事件（空格+向下箭頭）重新排列無序列表中的列表元素？

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鍵事件會隨着每個後續按鍵被觸發。 （這可以通過註冊按下控制鍵時打印到控制檯的事件和按下任何按鍵時打印到控制檯的事件來演示。空間密鑰被視爲普通密鑰。按下空格鍵按下的事件會被觸發一次，而按住它的任何後續按鍵將僅僅忽略它並觸發後一個按鍵的按鍵事件。