JavaScript でドラッグ&ドロップで要素を移動するときの備忘録

position: absolute; の要素をドラッグして移動するときはこんな感じで

HTML

<div class="container">
  <div class="draggable">
  </div>
</div>

CSS (position だけ重要)

.container {
  position: relative;
  width: 100%;
  height: 500px;
}
.draggable {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 100px;
  left: 100px;
  background-color: gray;
  cursor: grab;
}

JavaScript

const setDraggable = (element) => {
  let cursor
  let zIndex

  const draggingHandler = (e) => {
    const shiftX = e.target.parentNode.getBoundingClientRect().left + e.clientX - e.target.getBoundingClientRect().left
    const shiftY = e.target.parentNode.getBoundingClientRect().top + e.clientY - e.target.getBoundingClientRect().top

    const setPosition = (x, y) => {
      e.target.style.left = x - shiftX + 'px'
      e.target.style.top = y - shiftY + 'px'
    }
    const moveBox = (e) => {
      setPosition(e.pageX, e.pageY)
    }
    const mouseUp = (e) => {
      element.style.cursor = cursor
      element.style.zIndex = zIndex

      document.removeEventListener('mousemove', moveBox)
      e.target.removeEventListener('mouseup', mouseUp)
    }

    cursor = element.style.cursor
    zIndex = element.style.zIndex
    element.style.cursor = 'grabbing'
    element.style.zIndex = 100000

    setPosition(e.pageX, e.pageY)
    document.addEventListener('mousemove', moveBox)
    e.target.addEventListener('mouseup', mouseUp)
  }

  element.addEventListener('mousedown', draggingHandler)
  element.addEventListener('dragstart', (e)=>e.preventDefault())
}

setDraggable(document.querySelector('.draggable'))