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

我正在尝试使用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>

第一项
第二项
第三项
第四项

我该怎么做呢？

试试看

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

或

尝试

或

将此代码用于Jquery： 此示例使用向上箭头（38）。 要使用“向下”箭头，请将38替换为40（在我的chrome中，向下箭头打开一些扩展功能）：

$（文档）.ready（函数（）{
$（'body'）.keydown（函数（e）{
如果（e.ctrlKey&&e.which==38）{//检查是否按下了ctrl键
var lis=$（'ul>li'）；//获取所有li的
//订购李的
未排序=新数组（）；
对于（i=0；i；
}
//用新内容替换ul内容：
$（'ul'）[0]。innerHTML=新内容；
}
});

}))

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

$（文档）.ready（函数（）{
$（'body'）.keydown（函数（e）{
如果（e.ctrlKey&&e.which==38）{//检查是否按下了ctrl键
var lis=$（'ul>li'）；//获取所有li的
//订购李的
未排序=新数组（）；
对于（i=0；i；
}
//用新内容替换ul内容：
$（'ul'）[0]。innerHTML=新内容；
}
});

}))

这样就可以了：

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

---

我尝试过document.activeElement，基于此，我尝试更改无序列表中的li元素这个简单的解决方案怎么样：如果项目的顺序很重要，那么您应该使用有序列表，不是无序列表为了有语义标记，我尝试了document.activeElement基于此，我尝试更改无序列表中的li元素这个简单的解决方案怎么样：如果项目的顺序很重要，那么你应该使用有序列表，不是一个无序的列表以便有语义标记请给你的答案添加一些解释。请给你的答案添加一些解释。这很棘手，因为空格键不是像

Ctrl

、

Alt

或

Shift

这样的特殊键。这可能值得作为一个新问题发布。现在我将此作为一个棘手的问题发布，因为空格键不是像

Ctrl

、

Alt

或

Shift

这样的特殊键。这可能值得作为一个新问题发布。现在我将此作为一个问题发布

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