HTML:HTML 드래그 앤 드롭

드래그 앤 드롭 이란 ?

어떤 object랄 grab하여 다른 위치로 드레그 하는 기능으로 아주 많이 사용된다.

html에서 어떠한 element는 드래그 앤 드롭 api를 사용하여 이동 할 수 있다.

지원하는 브라우저 

드래그 앤 드롭에서 중요한 인터페이스는 DragEvent, DataTransfer 이다.

DataTransfer에서는  각 드래그 아이템의 종류와 이벤트의 상태를 담고 있다.

또한 데이터에 아이템을 추가하고 제거하는 메소드를 제공 한다.

DragEvent와 DataTransfer만으로 HTML 드래그 앤 드롭 기능을 추가할 수 있다.

*참고

DataTransfer vs DataTransferItem

• DataTransfer는 아이템에 접근하기 위해 동기적인 메소드를 사용
• DataTransferItem 는 비동기적인 메소드를 사용한다.

활용하기

1.드래그 할 element 정의

draggable로 만들기 위해서는 element가 1)draggable하게 만들고 2)  ondragstart 이벤트 핸들러를 추가해야한다.

2.드래그 데이터 정의

ondragstart핸들러 에서 드래그 데이터는 자유롭게 정의하고 포함 할 수 있다.  setData()는  드래그 데이터를 추가할 때 사용한다.

3. 드래그 효과 정의

브라우저는 드래그 효과(dropEffect)에 적합한 마우스 포인터를 정할 수 있다. 예로는 copy, move,link가 있다.

4. 드롭 위치 정의

특정 element를 drop지역으로 만들기 위해서는 1)ondragover과 2)ondrop 이벤트 핸들러를 추가하여야한다.
ondragover는 drop시의 효과를 정의하고 )ondrop에서는 dom에 움직일 element를 drop 지역으로 추가하는 동작을 맡는다.

5. 드롭 효과

드래그 아이템과 각 아이템을 가공하기 위해 getData()를 사용한다.
getData()를 사용하여 드래그 데이터로부터  요소의 id를 가져와 드롭위치로 추가할 수 있다.

6. 드래그 종료

드래그 종료시에는  dragend 이벤트가 발생한다. 해당 핸들러에 dropEffect 프로퍼티를 통해 드래그의 성공 여부를 알 수 있다.

출처 :MDN_드래그 앤 드롭