时间戳

首页 > 解决方案 > 如何使用 keydown 事件移动列表项

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

问题描述

我想使用向上和向下键盘箭头的 keydown 事件在 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>

标签： javascripthtmlcssdebuggingkeydown

解决方案

看一下这个。只是想帮助您了解这项技术。

//<![CDATA[
/* js/external.js */
var doc, bod, html, nav, M, I, S, Q; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
doc = document; bod = doc.body; html = doc.documentElement; nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
// use the above as a library - you can put the below (besides the load end) on another page if you want
var edit_list = I('edit_list');
function moveUp(t){
  var p = t.previousSibling;
  while(p && p.nodeType !== 1)p = p.previousSibling;
  if(p){
    edit_list.insertBefore(t, p);
  }
  else{
    edit_list.appendChild(t);
  }
}
function moveDown(t){
  var n = t.nextSibling;
  while(n && n.nodeType !== 1)n = n.nextSibling;
  if(n){
    n = n.nextSibling;
    if(n){
      edit_list.insertBefore(t, n);
    }
    else{
      edit_list.appendChild(t);
    }
  }
  else{
    edit_list.insertBefore(t, edit_list.firstChild);
  }
}
for(var i=0,q=Q('li', edit_list),l=q.length; i<l; i++){
  q[i].onkeyup = function(e){
    var k = e.key;
    if(k.match(/^(Arrow)?Up$/)){
      moveUp(this);
    }
    else if(k.match(/^(Arrow)?Down$/)){
      moveDown(this);
    }
  }
}
}); // load end
//]]>
/* css/external.css */
html,body{
  padding:0; margin:0;
}
h1{
  font-size:14px; margin-left:4px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <h1 contenteditable='true'>header</h1>
  <ul id='edit_list'>
    <li contenteditable='true'>textContent</li>
    <li contenteditable='true'>chelsea</li>
    <li contenteditable='true'>window</li>
    <li contenteditable='true'>sancho</li>
    <li contenteditable='true'>goal</li>
    <li contenteditable='true'></li>
    <li contenteditable='true'>lampard</li>
  </ul>
</body>

推荐阅读