Javascript 如何使用keydown事件移动列表项_Javascript_Html_Css_Debugging_Keydown

Javascript 如何使用keydown事件移动列表项

javascript html css debugging

Javascript 如何使用keydown事件移动列表项,javascript,html,css,debugging,keydown,Javascript,Html,Css,Debugging,Keydown,我想使用键盘上下箭头的按键事件在html中的可编辑div中移动列表项。向上箭头应向上移动该列表项，向下箭头应向下移动该列表项。但是我不能让代码工作 <html> <head> <meta charset="utf-8"> <title>Lists</title> </head> <body> <div id="bulletPoints" contenteditable="true"></

我想使用键盘上下箭头的按键事件在html中的可编辑div中移动列表项。向上箭头应向上移动该列表项，向下箭头应向下移动该列表项。但是我不能让代码工作

<html>
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
<div id="bulletPoints" contenteditable="true"></div>
<ul class="newUl" contenteditable="true" id="Head">header
  <ul>
    <ul>
      <li class="newLi" contenteditable="true">textContent</li>
      <li class="newLi" contenteditable="true">chelsea</li>
      <li class="newLi" contenteditable="true">window</li>
      <li class="newLi" contenteditable="true">sancho</li>
      <li class="newLi" contenteditable="true">goal</li>
      <li class="newLi" contenteditable="true"></li>
      <li class="newLi" contenteditable="true">lampard</li>
    </ul>
  </ul>
 </ul>
</div>


<script>
window.onload = function(){
  document.addEventListener('keydown', moveList);
}


const moveList = function(e){
  if (e.keyCode === 38){
    e.preventDefault();
    var upLink = document.querySelectorAll(".newList");
    for (var i = 0; i < upLink.length; i++) {
        upLink[i].addEventListener('keydown', moveList () {
            var wrapper = this.parentElement;
            if (wrapper.previousElementSibling)
                wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling);
        });
    }
  } else if (e.keyCode === 40){
    e.preventDefault();
    var downLink = document.querySelectorAll(".newList");

    for (var i = 0; i < downLink.length; i++) {
        downLink[i].addEventListener('keydown', moveList () {
            var wrapper = this.parentElement;

            if (wrapper.nextElementSibling)
                wrapper.parentNode.insertBefore(wrapper.nextElementSibling, wrapper);
        });
    }
  }
}
</script>
</body>
</html>


列表
标题


text内容
切尔西
窗口
桑乔
目标

兰帕德



window.onload=函数（）{
文件。addEventListener（'keydown'，moveList）；
}
常量移动列表=函数（e）{
如果（例如keyCode===38）{
e、 预防默认值（）；
var upLink=document.queryselectoral（“.newList”）；
对于（变量i=0；i

看看这个。只是想帮你看一下技巧

/*css/external.css*/
html，正文{
填充：0；边距：0；
}
h1{
字体大小：14px；左边距：4px；
}


测试模板
标题

文本内容
切尔西
窗口
桑乔
目标

兰帕德