Drag and Drop과 관련하여 (Mozilla 참고)

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요.

---

먼저, 드래그가 가능한 요소로 만들기 위해서는 draggale attribute과 ondragstart 전역 이벤트 핸들러를 추가해 줄 필요가 있음.

Mozilla에 ondragstart도 함께 넣어주라고 돼있어서 같이 적어 두지만, dataTransfer과 관련한 일을 할 필요가 없을 시에는 작성 안 해도 상관없는 듯하다.

<div draggable="boolean" ondragstart="dragstart_handlerName(event);"></div>
// boolean: 드래그 가능 여부 (true 또는 false)

function dragstart_handlerName(ev) {
 console.log("dragStart");
 // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

그런 다음, 아래와 같은 드래그 이벤트를 사용해서 이벤트가 일어나게 할 수 있음.

 

이벤트	이벤트 핸들러	설명
dragstart	ondragstart	사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다.​ + 파일을 브라우저로 드래그할 때는 발생하지 않는다.
dragenter	ondragenter	드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. event.preventDefault() 필요
dragover	ondragover	요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리 초마다 발생한다.) ​ + 기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없습니다. 따라서 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 합니다. 이 작업을 event.preventDefault() 메서드를 호출하는 것만으로 간단히 설정할 수 있습니다. (안 해주면 drop이 안됨)
drag	ondrag	요소나 텍스트 블록을 드래그할 때 발생한다.
drop	ondrop	요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다.
dragleave	ondragleave	드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.
dragend	ondragend	드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때)​ + 파일을 브라우저로 드래그할 때는 발생하지 않습니다.
dragexit	ondragexit	요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.

 

간단한 요소 이동 정도의 Drag and Drop 기능을 구현하기 위해서는 위의 내용 정도만 알아두면 된다.

하지만 드래그 시 데이터의 복사, 링크 이동 등등 다양한 기능을 수행하게 하고 싶다면 다음 링크를 참고해라.

---

+ 참고하면 좋은 글들

HTML 드래그 앤 드롭 API

DataTransfer