드래그 (drag)와 드롭 (drop) 기능은 UX (user experience)의 아주 중요한 기능입니다. 업로더나 리스트 내의 아이템 순서 정리, 또는 게임등에 유용하게 사용이 될 수 있죠. 이 포스팅에서는 HTML에서 사용할 수 있는 이 기능에 대하여 알아보겠습니다.
HTML의 Drag과 Drop의 기본 지식
보통 drag-and-drop 시스템에는 다음의 두가지 element가 존재합니다 - 마우스로 드래그를 할 수 있는 element와 드래그 된 element를 드롭 할 수 있는 element.
이 시스템을 구축하기 위해서는 아래의 코드를 이용하여 브라우저에게 어떤 엘리먼트가 드래그를 할 수 있는 엘리먼트 인지 알려 주어야 하죠. draggable이라는 속성을 지정합니다.
유저가 드래그 이벤트를 트리거하면 브라우저는 보통 드래그 하는 엘리먼트의 피드백으로 “유령 (ghost)” 이미지를 만들어 줍니다.
이 유령이미지는 다른 이미지로 교체할 수 있습니다. 그러기 위해서는 아래의 예제같이 드래그하려는 엘리먼트의 dragstart의 이벤트에 이미지를 설정해주면 됩니다.
위의 코드 블럭의 setDragImage 메서드에는 세가지 파라미터가 존재합니다. 처음은 img 엘리먼트이고, 두세번째 파라미터는 이 이미지의 horizontal과 vertical offset 값입니다. 이 코드가 실행되면 아래와 같이 교체된 이미지로 뜨는 것이 보이게 됩니다.
드롭을 허용하기 위해서는 다음과 같이 dragenter와 dragover 이벤트의 기본 동작을 막아야합니다.
DragEvent 인터페이스를 이해하자
자바스크립트에는 유저가 drag-and-drop를 실행한다는 DragEvent 인터페이스가 존재합니다. 아래의 리스트는 DragEvent 인터페이스에 존재하는 이벤트 타입들입니다.
drag | 유저가 엘리먼트를 드래그 하면서 트리거가 되는 이벤트 |
|---|---|
dragend | 유저가 드래그를 마치면 이 이벤트가 트리거 (마우스에서 손을 떼거나 ESC키를 누를 시) |
dragenter | 드래그가 된 엘리먼트가 드롭 될 타겟에 들어가면 이 이벤트가 트리거 |
dragleave | 드래그가 된 엘리먼트가 드롭 될 타겟에서 벗어나면 이 이벤트가 트리거 |
dragover | 드래그가 된 엘리먼트가 드롭 될 타겟의 위에 오면 이 이벤트가 트리거 |
dragstart | 드래그가 시작되면 이 이벤트가 트리거 |
drop | 드래그가 된 엘리먼트가 타겟에 드롭이 되면 이 이벤트가 트리거 |
주의점!: 브라우저 밖에서 드래그하여 브라우저에 드롭을 한다면, 브라우저에서는 dragstart 와 dragend의 이벤트가 실행되지 않습니다. (예를 들어 파일 매니저같은 프로그램에서 브라우저로 드롭 시)
DragEvent는 커스텀 이벤트를 만들기에 유용합니다. 예를 들어, div에 커스텀 drag event를 page load에 넣고자 하면 다음과 같이 할 수 있습니다.
위의 예제는 customDragStartEvent가 하나의 DragEvent() 인스턴스입니다.
customDragStartEvent에는 두개의 constructor argument가 존재합니다. 첫번째는 위의 일곱가지 중 하나의 drag event 타입이고, 두번째는 dataTransfer 키가 있는 객체입니다 (이 객체에 관해서는 아래에 자세히 설명 하겠습니다). 그런 후에는 아래와 같이 드래그 하려는 엘리먼트를 정의 해야합니다.
그리고 아래와 같이 event listener를 정의 합니다:
위의 코드에서 첫번째 event listener는 “Drag started!” 라는 콘솔 로그가 찍히면서 이벤트가 시작이 되고 setData() 메서드를 이용하여 이벤트의 dataTransfer property를 설정합니다. 이후에는 드래그 하려는 엘리먼트에 다음과 같은 커스텀 이벤트를 트리거 할수 있습니다.
dataTransfer를 이용여 데이터를 이동하는 방법
dataTransfer라는 객체는 소스 엘리먼트 (드래그하는 아이템)와 타겟 엘리먼트 (드롭하려는 곳) 사이의 중간 브릿지 역할을 합니다. 이 두 엘리먼트에게 존재하는 일시적인 저장 공간입니다.
이 데이터는 텍스트, URL, 또는 커스텀 데이터 타입이 가능합니다.
setData()를 이용하여 패키지화 하기
드래그 하는 엘리먼트에서 드롭하는 곳으로 데이터를 전달하기 위해서는 dataTrasfer 객체에 존재하는 setData()라는 메서드를 이용하게 됩니다. 이 메서드는 전달하려는 데이터 타입을 지정합니다. 다음의 예제를 보겠습니다:
유저가 어떠한 엘리먼트를 드래그 하게되면, setData() 메서드는 “Hello, world!”라는 텍스트를 text/plain의 데이터 타입으로 패키지화 합니다. 이 데이터는 드롭되는 타겟에 보이게 되고 drag 이벤트에 연결이 됩니다.
getData()를 이용하여 데이터를 가지고 오기
타겟 엘리먼트의 event listener에서는 다음의 예제 코드로 getData()를 이용하여 데이터를 받을 수 있습니다.
위의 코드는 setData() 메서드에서 지정된 같은 데이터 타입 (text/plain)을 받게 되고 받은 데이터를 용도에 맞추어 사용할 수 있게 됩니다.
Drag and Drop 인터페이스의 사용 케이스
drag-and-drop 기능은 웹 애플리케이션에 중요하게 사용이 됩니다. 어디에 그리고 왜 사용하여야 할까요?
파일 업로더: 유저에게 파일을 다른 프로그램에서 가져와 드롭하여 업로드를 가능하게 할수 있습니다.
리스트 정렬: 테스크리스트, 플레이리스트나 이미지 갤러리 같이 정렬이 가능한 리스트가 사용이 되었다면 아이템을 드래그, 드롭하여 쉽게 정렬할 수 있습니다
인터랙티브 대시보드: 데이터의 시각화나 리포팅에서는 드래그, 드롭을 사용하여 위젯이나 차트를 정렬하는 기능이 유저에게는 아주 간편하고 용이합니다.
참고:
