如何使用键盘事件对无序列表中的列表元素重新排序？

Question

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

<ul>
<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>

我该怎么做？

Answer 1

试试看；

$(li1).detach().insertAfter(li2);

或

$(li1).detach().insertBefore(li2);

Answer 2

将此代码与 Jquery 一起使用：此示例使用向上箭头 (38)。要使用 'down' 箭头，将 38 替换为 40（在我的 chrome 中，向下箭头打开一些扩展功能）：

$(document).ready(function(){
$('body').keydown(function(e){
    if (e.ctrlKey && e.which == 38){//check if ctrl key is pressed
        var lis = $('ul > li'); //get all li's

        //order the li's
        not_ordered = new Array();
        for(i=0; i < lis.length; i++){
            not_ordered.push(lis[i].innerText);
        }
        ordered = not_ordered.sort();
        //rebuild the li's with new order:
        var new_ul_content = '';
        for(i=0; i < ordered.length; i++){
            new_ul_content += '<li tabindex="0">' + ordered[i] + ' </li>';
        }
        //replace ul content with new content:
        $('ul')[0].innerHTML = new_ul_content;
    }

});

});

Answer 3

这样做就可以了：

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

Fiddle

如何使用键盘事件对无序列表中的列表元素重新排序？

How to reorder list elements in unordered list using keyboard events?

javascript

jquery

accessibility

wai-aria