[JS] 드래그 이동이 가능한 draggable 요소 만들기

 

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다.

 

draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다.

 

코드

 

코드 풀이

<div class="mover">drag</div>

먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다.

 

let isPress = false,   // 마우스를 눌렀을 때
    prevPosX = 0,      // 이전에 위치한 X값
    prevPosY = 0;      // 이전에 위치한 Y값
    
const $target = document.querySelector(".mover");

// 드래그 구현에 필요한 이벤트
$target.onmousedown = start;
$target.onmouseup = end;

// 요소의 상위 요소 (임시로 window)
window.onmousemove = move;

드래그 기능을 구현하기 위해서는 mousedown, mousemove, mouseup 이벤트를 사용해야 합니다.

 

• mousedown - 이벤트가 적용된 요소 위에서 마우스 왼쪽 버튼을 누를 때 발생합니다.
• mousemove - 이벤트가 적용된 요소위에서 마우스를 움직일 때 발생합니다. 
• mouseup - 마우스 버튼 누르고 있다가 뗄 때 발생합니다.

 

JS에서는 일반 요소의 drag 여부를 판단할 수 없습니다. 그러므로 드래그의 조건인 마우스 클릭과 움직임 이벤트로 드래그를 구현해야 합니다.

 

// mousedown
function start(e) {
  prevPosX = e.clientX;
  prevPosY = e.clientY;

  isPress = true;
}

요소 위에서 마우스 왼쪽 버튼을 클릭할 시 발생되는 mousedown 이벤트로 함수를 호출해줍니다. 요소가 위치한 좌표를 얻어서 변수에 저장해주고, 마우스 버튼 누름 여부를 저장해줍니다.

 

// mousemove
function move(e) {
  if (!isPress) {
    return;
  }
  
  // 이전 좌표와 현재 좌표 차이값
  const posX = prevPosX - e.clientX; 
  const posY = prevPosY - e.clientY; 
  
  // 현재 좌표가 이전 좌표로 바뀜
  prevPosX = e.clientX; 
  prevPosY = e.clientY; 
  
  // left, top으로 이동
  $target.style.left = ($target.offsetLeft - posX) + "px";
  $target.style.top = ($target.offsetTop - posY) + "px";
}

요소 위에서 마우스를 움직이면 이벤트가 발생되는 mousemove 이벤트는 "드래그"가 아닌 "움직임"을 감지합니다.

그러므로 드래그의 충족 조건인 왼쪽 마우스 버튼 클릭 여부를 체크해줘야 합니다.

 

마우스 클릭 여부가 체크되었다면, 이제 마우스를 움직인 만큼 요소를 이동시켜야 합니다. 요소를 이동시키는 방법은 이전에 위치했던 좌표에서 현재 마우스를 움직인 좌표를 뺌으로 차이 값을 구해주고, top과 left 속성으로 이동시켜줍니다.

 

// mouseup
function end() {
  isPress = false;
}

마우스를 땔 시, move 함수의 코드가 실행되지 않도록 다시 isPress 변수 값을 false로 바꿔서 마우스 버튼을 땠다는 것을 알 수 있도록 해줍니다.