[javaScript] Drag & Drop

Drag and Drop API에 대해서 정리 해보겠습니다.

제가 공부하고 정리한 내용이기 때문에 다소 장황하고, 틀린 부분이 있을 수 있습니다 :D

 

---

Drag and Drop API

<div class = "div-class" ... draggable="true" ondragstart="ondragstart(event)" ondragover="ondragover_handler(event)" ondragend="ondragend(event)" ondrop="ondrop(event)"

 

 

draggable = 'true'

해당 div 영역이 드래그를 할 수 있도록 하기위해 draggable 속성을 true로 설정해줍니다.

<div class="pocket-item" id="pocket-item-1" draggable="true">

 

아래 그림 처럼 드래그를 할 수 있게 됩니다.

 

draggable 속성만 추가한다고 해서 되는게 아니라서, 이제 Drag and Drop API 에 대해서 아래의 이벤트를 구현해보겠습니다.

• ondragstart
• ondragend
• ondragover
• ondrop

 

ondragstart

드래그가 시작됐을 때, 처리할 이벤트

dataTransfer 객체에 setData로 데이터를 저장할 수 있습니다.

드래그 중에 css 속성이나 클래스를 추가할 수 있습니다.

function ondragstart_handler(event) {
	dataTransfer.setData('text/plain', event.target.id);
    $('#' + event.target.id).addClass('placeholder');	// 클래스 값을 주기
    // 또는, 변수 새로 받아서 사용하기.
    // var pocketItem = document.getElementById(event.target.id);
}

 

ondragend

드래그가 끝났을 때, 처리할 이벤트

예를 들어, 아까 dragstart에 주었던 클래스를 삭제하는 이벤트를 생성 해보았습니다.

function ondragend_handler(event) {
	$('#' + event.target.id).removeClass('placeholder');
}

 

ondragover

드래그 중 처리할 이벤트

* 브라우저에서 기본적으로 drop 동작을 방지하고 있어서, ondragover에서 drop 동작 방지하지 못하도록 처리해줘야 한다.

function ondragover_handler(event) {
	 event.preventDefault();	// important!
}

 

예를 들어.. ondragover에서는 이렇게 처리할 수도 있습니다.

첫 번째 포켓을 -> 두 번째 포켓과 위치를 옮길 때, 드래그 중에 해당 영역에 ondragover가 실행이 될 때, 시각적으로 표현을 시키는 것입니다.

 

코드는 아래와 같이 작성할 수 있습니다.

function ondragover_handler(e) {
    e.preventDefault();		// drop 방지 처리

    if (e.target.className === 'pocket-item') {
        const parent = document.getElementById(e.target.id);
        const child = document.getElementById(draggable);    // dragstart 함수에서 설정한 draggable 변수
        parent.after(child);	// 포켓2 다음에 포켓1을 추가
    }
}

 

ondrop

해당 영역에 드랍이 되었을 때, 이벤트 처리

이전의 ondragstart에서 설정해줬던 dataTransfer 객체의 데이터를 받아서 사용할 수 있습니다.

function ondrop_handler(event) {
    const id = event.dataTransfer.getData('text');	// ondragstart에서 설정했던 데이터
    const dragItem = document.getElementById(id);
    const dropzone = event.target.id;
    
    // .. 아래는 드랍했을 때 처리..
}

 

 

---

REFERENCES

MouseEvent.clientX - Web API | MDN

 

HTML Drag and Drop API

How To Create Drag and Drop Elements with Vanilla JavaScript and HTML | DigitalOcean