JavaScript 드래그 할 수 있는 HTML 요소 만들기

종종 HTML 요소의 드래그가 필요한 때가 있습니다.

드래그를 통해 상태값을 변경하거나, 간단하게 설정을 적용시킬 수 있을때 특히 유용합니다.

저희가 준비중인 프로젝트에서는 칸반 보드가 들어갈 예정인데 이를 위해 꼭 필요한 기술입니다.

 

<div class="kanbanCard">
</div>

일단 칸반 카드로 쓸 div를 만들어 줬습니다.

 

.kanbanCard {
  cursor: move;
  position: absolute;
  background-color: #2196F3;
  color : white;
  border: 1px solid #d3d3d3;
  text-align: center;
}

cursor:move로 마우스를 올렸을때 십자표시로 커서가 바뀌도록 css를 적용해줍니다. 

 

<script>
//Make the DIV element draggagle:
let cards = document.getElementsByClassName("kanbanCard");
for(var i in cards){
	dragElement(cards[i]);
}

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
    alert(elmnt.style.top + "," + elmnt.style.left)
  }
}
</script>

이제 위의 자바스크립트 코드가 필요합니다. 코드 전문을 먼저 보여드리고 나서, 함수를 한개씩 분석해보겠습니다.

 

let cards = document.getElementsByClassName("kanbanCard");
for(var i in cards){
	dragElement(cards[i]);
}

일단 카드들은 class 이름으로 셀렉트를 해서 배열로 받아 둔 뒤에, 반복문을 통해 dragElement 함수에 파라미터로 넣어 호출했습니다.

이제 dragElement  함수는  그 아래의 모든 함수인데요, 

  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;

pos 1,2,3,4를 0 으로 초기화 한 뒤에, 파라미터로 받은 요소를 마우스 클릭 할 경우 dragMouseDown 이라는 함수를 호출시킵니다.

 

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

e.preventDefault로 마우스 클릭에 대한 이벤트를 일단 막습니다. 

그러고 나서 pos 3과 4에 각각 이벤트의 x와 y 좌표를 기록합니다.

마우스에서 클릭을 뗀다면 closeDragElement 함수를 호출, 마우스를 이동한다면 elementDrag 함수를 호출합니다.

 

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

일단 마우스를 이동할때에 호출되는 elementDrag 함수입니다.

역시 preventDefault를 일단 해 주고 시작합니다.

pos1 에는 기존의 x 값에서 이동한 위치값을 저장합니다. pos2에는 역시 기존의 y 값에서 이동된 위치값을 저장합니다.

pos3 와 4 에는 새로운 x,y 좌표를 저장합니다.

이후 마지막으로 엘리먼트의 이동시킵니다.

 

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
    alert(elmnt.style.top + "," + elmnt.style.left)
  }

마우스에서 클릭을 뗄떼의 이벤트입니다.

모든 기능을 해지한 다음 최종 위치의 좌표값을 표시하도록 했습니다. 실제 기능을 입힐때는 자바스크립트쪽의 코드가 훨씬 복잡해 질 듯 합니다.

 

아래 영상은 코드를 실제 구동해보는 영상 입니다.

 

자바스크립트 코드는 w3schools 를 참고했습니다.

https://www.w3schools.com/howto/howto_js_draggable.asp

How To Create a Draggable HTML Element