Draggable

HTML5의 모든 요소에는 draggable이라는 속성을 붙일 수 있다.

<p draggable="true">drag01</p>
<h3 draggable="true">drag02</h3>
<div draggable="true">drag03</div>
...

이 속성이 적용된 요소를 이용해 드래그 이벤트를 활용할 수 있고 DragEvent, DataTransfer 와 같은 인터페이스의 메소드들도 활용해볼 수 있다.

DragEvent

DragEvent는 MouseEvent를 상속받고, 아래와 같은 이벤트들을 지정할 수 있다. 더 자세한 건 Drag & Drop API 문서를 보자.

브라우저는 기본적으로 DOM 요소에 드롭 이벤트가 발생되어도 아무 일도 일어나지 않는다. 따라서 특정 요소를 드롭 위치로 지정하고 싶다면 ondragover 혹은 ondrop을 지정해주어야 한다.

DataTransfer

모든 DragEvent는 본인의 이벤트 데이터를 들고 있는dataTransfer를 가지고 있다. 이 객체를 통해 드래그하는 요소 데이터를 관리할 수 있다. 관리할 데이터는 html도 가능하며, 더 자세히는 Recommended drag types를 보자.

1. 드래그가 시작되었을 때 해당 요소의 value를 관리할 text data로 추가

function dragStart(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
}

2. 드래그하는 중에 마우스 포인터가 드롭 위치로 이동했을 때의 효과 주기

function dragOver(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = "move";
}

3. 드롭했을 때 dataTransfer에 넣었던 데이터를 꺼내서 활용하기

function drop(event) {
  event.preventDefault();

  const data = event.dataTransfer.getData("text");
  event.target.appendChild(document.querySelector(`#${data}`));
}