바탕화면에서 파일을 옮길 때 드래그를 통해 옮길 수 있습니다.
하지만 웹 사이트에서는 옮겨지는게 있고, 아닌게 있습니다.
특히 글은 옮겨지지 않고 선택만 됩니다.

웹사이트에서 드래그는 할 수 없는걸까요?
오늘은 drag 관련 event에 대해 공부한 내용을 기록하겠습니다.

Drag

드래그는 마우스의 버튼을 누른 채, 화면 위의 커서를 어떤 점에서 다른 점까지 이동시킨 후 마우스를 떼는 조작을 뜻합니다. 보통 특정 부분을 선택할 때 사용됩니다.

원래는 굉장히 복잡한 스크립트를 작성해야 했었지만, HTML5에 Drag & Drop이 기본적으로 내장되어 있습니다.

Drag의 조건 draggable

드래그를 위해서는 dragable 속성을 true로 지정하면 드래그 될 수 있는 객체가 됩니다

<li draggable="true">리스트</li>

처럼 작성하게 되면 해당 li tag가 드래그로 글의 일부가 선택되는게 아니라
전체가 움직일 수 있게 됩니다.

draggable 속성을 지정하지 않았을 때는 드래그 시 특정 내용이 선택됩니다.

draggable 속성을 true로 지정했을 때는 드래그 시 element 요소 전체를 선택해서 움직이는것같은 효과가 납니다.

Drag 이벤트들

drag 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.
따라서 관련 이벤트가 굉장히 많습니다.

그 중에서도 drag & drop을 위해 필수적으로 사용되는 최소한의 이벤트만을 기록하겠습니다.

dragstart

드래그를 시작했을 때 발생하는 이벤트입니다.
dragstart 이벤트 시 넘길 값을 설정합니다.

dragover

드래그 중일 때 수백밀리초마다 발생하는 이벤트입니다.
mdn문서에 따르면 이 이벤트에 대해서 e.preventDefault()로 기본 동작을 막아야 합니다.

e.dataTransfer.dropEffect 값을 통해 드래그 중 마우스가 어떤식으로 표시될지 정할 수 있습니다.

Drag 값

drag & drop을 위한 관련 이벤트들은 DataTransfer 객체를 가집니다.
이 e.dataTransfer에 관련 정보를 가지고 있게 됩니다.

// 드래그 시 값 저장
e.dataTransfer.setData(key, value);

// 드랍 시 저장한 값을 불러와 사용
e.dataTransfer.getData(key);

Drop

드래그를 놓았을 때 발생하는 이벤트를 drop event라고 합니다.
dragstart 이벤트에서 설정한 넘길 값을 drop 이벤트에서 받아 사용합니다.
mdn문서에 따르면 이 이벤트에 대해서도 e.preventDefault()로 기본 동작을 막아야 합니다.

예시

위 코드는 제가 작성한 drag & drop 이벤트 예시 코드입니다.

drag 시작 시 시작한 element 요소를 기억하고, dataTransfer에 관련 데이터를 저장합니다.

drag를 끝낸 drop 시 dataTransfer에서 데이터를 꺼내 사용합니다.

정리

html5에 미디어 요소는 추가된것을 알았지만, 드래그 관련 내용도 추가된것은 처음 알게 되었습니다.

드래그를 통해서 html 요소들의 순서를 바꾸거나, 내용을 바꾸는걸 보았는데
이에 대해서 예시 코드를 작성하면서 어떻게 구현할 수 있는지까지 알아보았습니다.

참고

코딩의 시작, TCP School - Drag and Drop
mdn - Document: drag 이벤트
mdn - HTML 드래그 앤 드롭 API