React - DragDrop 구현

 

회사에서 Drag Drop 이벤트를 사용을 하는 부분이 라이브러리를 통해 구현되어 있었는데 커스텀이 힘든 경우가 대부분이였었다..

그렇기에 HTML 에서 지원하는 방식으로만 구성해봤다.

공식문서

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

HTML Drag and Drop API - Web APIs | MDN

"use client"
import { DragEvent } from "react"

const DragItem = () => {

    const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
        e.dataTransfer.setData('text/plain', e.currentTarget.id);
    }

    return (
        <div
            id="draggableItem"
            draggable="true"
            onDragStart={handleDragStart}
            style={{ width: '100px', height: '100px', backgroundColor: 'skyblue', cursor: 'grab' }}
        >
            사용자
        </div>
    )
}

export default DragItem;

 

위에 구현한 DragItem 컴포넌트이다. 해당 컴포넌트를 특정 (DropZone)에 Drop 시 해당 DropZone 에 컴포넌트가 추가되도록 할거다.

 

일단 div 태그의 draggable ="true" 는 요소를 드래그 가능하게 만든다. 당연하게도 false 면 드래그가 불가능하다.

onDragStart 이벤트 헨들러는 요소가 드래그를 시작할때 발생하는 이벤트를 처리한다. 여기서 실행되는 handleDragStart 함수는

e.dataTransfer.setData(format, data) 코드를 싱행하는데 해당 코드는 실제 드래그 하는 요소의 id 값을 text/plain 형식으로 설정하고, 이 정보는 나중에 드랍 이벤트가 발생했을 떄 사용된다. 드래그 앤 드랍 고자ㅓㅇ에서 이렇게 설정한 데이터는 드래그된 요소를 드랍 영역에 놓알을 때 접근할 수 있게되며 이르 통해 어떤 요소가 드랍되었는지 DropZone 컴포넌트는 알 수 있게되고 추가할 수 있게된다.

 

 

"use client"
import { DragEvent } from "react"

const DropZone = () => {

    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
        e.preventDefault();
    }

    const handleDrop = (e: DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        const data = e.dataTransfer.getData('text');
        const draggableItem = document.getElementById(data);

        if(draggableItem && e.currentTarget){
            e.currentTarget.appendChild(draggableItem);
        }
    }

    return (
        <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{ width: '300px', height: '300px', border: '2px dashed #ccc', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
      >
        사용자목록
      </div>
    )
}

export default DropZone;

 

onDragOver 이벤트 핸들러에서 e.preventDefault() 를 호출하는 것은 드랍 타겟이 드래그 되는 요소의 드랍을 허용하도록 만드는 표준 방식이다. (공식문서에서도 이렇게 처리함) 

 

onDrop이벤트 핸들러는 이름처럼 Drop 이벤트를 처리한다. 코드를 보면 e.dataTransfer.getData('text')로 되어 있는데 전에 드래그된 요소에 대해 이전에 e.dataTransfer.setData() 메소드를 사용해 설정한 데이터를 검색할 때 사용된다. 이 함수는 드래그 앤 드랍 과정에서 전송된 데이터를 가져오는데 사용된다. id 를 드래그할때 보내고 id를 드랍할때 받는다.