Javascript 使用箭头键将 div 移动到新位置

Question

我想让一个 div 能够在 4 方向上使用箭头键移动并支持多键(例如移动到左上角)onkeypress。当我点击一些箭头时，我希望移动到那个方向，直到我 Handlebars 指从那个按钮上移开。虽然移动只是一次，但我不明白为什么会这样。

function place(id,x_pos, y_pos) {
  var element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos+'px';
  element.style.top = y_pos+'px';
}
setInterval(update,1);

function update(){
   document.addEventListener('keydown', keyPress);
  }
  
  function keyPress(e) {
  var x = e.keyCode;
  switch (x) {
    case 37:
     place('move', move.style.left-10,  move.style.top);
      break;

    case 39:
   place('move', move.style.left+10,  move.style.top);
      break;

    case 38:
    place('move', move.style.left,  move.style.top-10);
      break;

    case 40:
     place('move', move.style.left,  move.style.top+10);
      break;
  }
 // console.log(x);
}

*{
  margin:0;
  padding:0;
  }
div#move{
  background-color:yellow;
  width:5vw;
  height:5vw;
 
  }

<div id='move'></div>

Answer 1

您的代码的问题是 element.style.left 给出的结果为 10px，当您在 10px 上添加 10 时，它将是一个类似 10px10 的字符串，这将使属性值不正确。由于第一次未设置属性，因此第一个分配 id 工作正常。你需要在数值上得到左边和右边。

您也不需要使用 setInterval 将更新函数与文档绑定(bind)。一次就够了。

检查下面的代码

function place(id,x_pos, y_pos) {
  var element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos+'px';
  element.style.top = y_pos+'px';
}


function update(){
   document.addEventListener('keydown', keyPress);
}
  
function keyPress(e) {
  var x = e.keyCode;
  
  var move = document.getElementById("move").getBoundingClientRect();
 
  var left = parseInt(move.left,10);
  var top = parseInt(move.top,10)
    
  switch (x) {
    case 37:
     place('move', left -10,  top);
      break;

    case 39:
   place('move', left+10,  top);
      break;

    case 38:
    place('move', left,  top-10);
      break;

    case 40:
     place('move', left,  top+10);
      break;
  }
 // console.log(x);
}
update();

*{
  margin:0;
  padding:0;
  }
div#move{
  background-color:yellow;
  width:5vw;
  height:5vw;
 
  }

<div id='move'></div>