인터넷 익스플로러(IE)의 HTML5 파일 API 지원 여부는 버전에 따라 크게 달라집니다. IE9는 파일 API를 지원하지 않으며, IE10부터 파일 API를 정식으로 지원하기 시작했습니다.
HTML5 드래그 앤 드롭(DnD) API란?
파일 API가 활용되는 대표적인 예 중 하나가 바로 드래그 앤 드롭(Drag and Drop)입니다. HTML5는 브라우저에 네이티브 수준의 드래그 앤 드롭(DnD) 기능을 제공하는 전용 API를 도입했으며, 이를 통해 개발자는 복잡한 자바스크립트 코드 없이도 훨씬 간편하게 드래그 앤 드롭 기능을 구현할 수 있습니다.
드래그 앤 드롭 구현 예제 코드
아래 예제는 보라색 상자를 마우스로 끌어 이동할 수 있게 만드는 간단한 HTML5 드래그 앤 드롭 데모입니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; }
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script>
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>
코드 핵심 포인트
draggable="true": 해당 요소를 드래그 가능하도록 설정하는 HTML5 속성입니다.dragStart(ev): 드래그가 시작될 때 호출되며,dataTransfer객체를 통해 이동 효과와 전달할 데이터를 지정합니다.setData(): 드래그 대상 요소의 ID를 데이터로 저장하여 드롭 시 활용할 수 있습니다.setDragImage(): 드래그 중 화면에 표시될 이미지를 지정합니다.
HTML5 DnD API를 사용하면 이처럼 몇 줄의 코드만으로 직관적인 드래그 앤 드롭 인터페이스를 손쉽게 만들 수 있습니다. 단, IE9 이하 버전에서는 파일 API와 관련 기능이 동작하지 않으므로, 브라우저 호환성을 고려한 대체 방안을 마련하는 것이 좋습니다.