드래그 이벤트 구현하기

드래그

드래그는 클릭 -> 마우스 이동 -> 마우스 떼기로 이루어진다.

마우스 클릭(mousedown)에 이벤트를 등록하고 마우스 떼기(mouseup)에서 이벤트를 지워주면 된다.

또한 브라우저에서 기본으로 제공하는 드래그 이벤트를 없애주면 된다.

mousedown에 mousemove와 mouseup 이벤트를 등록하고 mouse up에서 이를 모두 지워주었다.

const slider = document.querySelector(".slider");
const thumb = slider.querySelector(".thumb");
const before = slider.querySelector(".balance__goal .complete");
console.log(before);

thumb.onmousedown = function (event) {
  event.preventDefault();

  let shiftX = event.clientX - thumb.getBoundingClientRect().left;
  let End = slider.offsetWidth - thumb.offsetWidth;

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);

  function onMouseMove(event) {
    let newComplete =
      event.clientX - shiftX - slider.getBoundingClientRect().left;

    if (newComplete < 0) {
      newComplete = 0;
    }

    if (newComplete > End) {
      newComplete = End;
    }

    before.style.width = newComplete + "px";
    thumb.style.left = newComplete + "px";
  }

  function onMouseUp() {
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  }
};

thumb.ondragstart = function () {
  return false;
};

ref

https://ko.javascript.info/mouse-drag-and-drop