dropzone 속성이란?
HTML에서 드래그한 데이터를 특정 영역에 놓을(drop) 때, 해당 데이터를 복사(copy), 이동(move), 또는 연결(link) 중 어떤 방식으로 처리할지 지정하려면 dropzone 속성을 사용합니다.
dropzone 속성의 세 가지 값
- copy(복사) — 드롭이 발생하면 드래그한 요소의 복사본이 생성됩니다.
- move(이동) — 드래그한 요소가 원래 위치에서 새로운 위치로 이동합니다.
- link(연결) — 드래그한 데이터 자체가 아닌, 해당 데이터를 가리키는 링크가 생성됩니다.
기본 사용 예제
다음은 dropzone 속성을 활용하는 간단한 마크업 예제입니다.
<div dropzone="copy">
</div>
위 코드처럼 대상 요소에 dropzone="copy"를 지정하면, 그 영역으로 드래그된 데이터가 복사 방식으로 처리되도록 의도할 수 있습니다.
브라우저 지원 현황과 주의 사항
아쉽게도 현재 dropzone 속성은 어떤 주요 브라우저도 지원하지 않습니다. 이 속성은 과거 HTML5 초안에 포함되었지만, 이후 표준 명세에서 제외된 상태입니다.
따라서 실무에서는 drag & drop API의 dataTransfer.dropEffect 속성을 활용하거나, dragover·drop 이벤트 핸들러 내에서 복사, 이동 등의 동작을 직접 제어하는 것이 안전하고 권장되는 방법입니다.