[javascript] 자바스크립트 Drag&Drop 구현하기

 

 

서론

Html 드래그 앤 드롭 api는 돔 이벤트 모델에서 정보를 가져와 정보를 업데이트 하는 방식으로 이루어진다. 드래그 앤 드롭을 구현하는데는 여러 방법이 있는데 드래그 된 아이템의 CSS 스타일을 업데이트 할 수도 있고 아니면 드래그 할 아이템을 복사해서 드롭하는 장소에 붙여넣기 할 수도 있다.

구현

먼저 html을 통해 드래그 할 요소와 드롭할 요소를 만들자. draggable='true'를 추가하여 요소를 드래그 가능하게 만들 수 있다. 처음 알았음
태그 중에 디폴트로 draggable한 요소가 몇가지 있는데 <a>는 가본적으로 드래그 가능하고, <span>은 드래그 불가능하다.

<div class='container'>
  <span id='draggableOne' draggable='true'>
    drag
  </span>
  <span> dropzone </span>
</div>

드래그 앤 드롭 이벤트 핸들러는 최소 세가지 요소로 구성된다. (전부 함수로 지정된다!!)

• ondragstart : 드래그 된 아이템에 id를 부어하고 드래그 상태에서 일어날 변화들을 지정할 수 있음
• ondragover : 드롭 액션을 지정
• ondrop : 드롭 행위가 일어난다. 드래그 된 아이템은 DOM을 통해 새로운 부모의 자식이 된다.(이렇게 쓰니까 입양가는 거 같네..)

DataTransfer함수를 통해서 드래그가 일어나고 있는 동안 돔 이벤트로 부터 데이터를 추적할 수 있다. 이를 사용하기 위해서는 setData를 통해서 아이디를 지정해 줘야 한다.

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor = 'yellow';
}

html에서

<div class='container'>
  <span id='draggableOne' draggable='true' ondragstart='onDragStart(event);'>
    drag
  </span>
  <span> dropzone </span>
</div>

그 다음 ondragover이벤트를 다음과 같이 지정해준다. 이렇게 하면 브라우저가 드롭 동작을 막는 것을 저지해 드래그 가능한 요소가 dropzone에 도달 가능하다.

  <span ondragover='onDragOver(event);'>
    dropzone
  </span>

function onDragOver(event) {
  event.preventDefault();
}

마지막으로 setData로 얻은 id를 이용해서 getData가 지정된 id에 있는 데이터를 가져올 수 있도록 한다. 마지막에 datsaTransfer 객체를 리셋해주는 걸 잊지 말자.

  <span ondragover='onDragOver(event);' ondrop='onDrop(event);'>
    dropzone
  </span>

function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');

  const draggableElement = document.getElementById(id);
  const dropzone = event.target;

  dropzone.appendChild(draggableElement);

  event
    .dataTransfer
    .clearData();
}