键盘的方向键控制div 进行上下左右移动，上左下右等斜方移动

写这个东西很简单，主要是组合键的处理，div移动的方式有很多，我用的最简单的方式就是父容器relative，需要子滑块absolute。这样控制子滑块的left 和 top 就可以控制它移动了。组合键的方式也很简单，当 keydown 的时候，将keyCode 放入一个Set里面，然后将将这个set遍历进行移动操作，如果 set里面有 ↑← 的keyCode 就执行上移左移操作。 keyup的时候就从 Set里面delete 对于的keyCode。这样就实现了组合键的移动。

演示（按 `上下左右` 可以滑动 SLIDE ）

SLIDE

CodePen: CodePen Address

CSS

.move-container{
  width: 800px;
  height: 500px;
  background: #000;
  margin:auto;
  margin-top:80px;
  position: relative;
}
.move-element{
  width: 80px;
  height: 60px;
  background:#fff;
}

HTML(pug)

div.move-container
  div.move-element#move SLIDE

JS

class absMover  {
  constructor(el, stepPx = 1) {
    this.el = el
    this.stepPx = stepPx
    this.offsetLeft = el.offsetLeft
    this.offsetTop = el.offsetTop
  }

   render () {
     this.el.setAttribute('style',
`position:absolute;top:${this.offsetTop}px;left:${this.offsetLeft}px`)
  }

  moveLeft () {
    this.offsetLeft -= this.stepPx
    this.render()
  }
  moveRight () {
    this.offsetLeft += this.stepPx
    this.render()
  }
  moveTop () {
    this.offsetTop -= this.stepPx
    this.render()
  }
  moveBottom () {
    this.offsetTop += this.stepPx
    this.render()
  }

}

const move = document.getElementById('move')
const mover = new absMover(move, 1)

function eventKeyDown (key) {
  switch (key) {
    case 37:
      mover.moveLeft()
      break
    case 38:
      mover.moveTop()
      break
    case 39:
      mover.moveRight()
      break
    case 40:
      mover.moveBottom()
      break
  }
}
let keyDownSet = new Set()

function moveSlide() {
  keyDownSet.forEach(key => eventKeyDown(key))
}

document.addEventListener('keydown', (e) => {
  e.preventDefault()
  keyDownSet.add(e.keyCode)
  moveSlide()
})
document.addEventListener('keyup', (e) => {
  keyDownSet.delete(e.keyCode)
})

演示（按 上下左右 可以滑动 SLIDE ）

CSS

HTML(pug)

JS

演示（按 `上下左右` 可以滑动 SLIDE ）