DnD(끌어서 놓기)는 마우스 클릭을 통해 항목을 쉽게 복사, 재정렬 및 삭제할 수 있는 강력한 사용자 인터페이스 개념입니다. 이렇게 하면 사용자가 요소 위에서 마우스 버튼을 클릭한 상태로 다른 위치로 드래그한 다음 마우스 버튼을 놓아 요소를 드롭할 수 있습니다.
기존 HTML4로 드래그 앤 드롭 기능을 구현하려면 개발자는 복잡한 자바스크립트 프로그래밍이나 jQuery 등과 같은 기타 자바스크립트 프레임워크를 사용해야 합니다.
이제 HTML 5는 브라우저에 기본 DnD 지원을 제공하여 훨씬 더 쉽게 코딩할 수 있는 드래그 앤 드롭(DnD) API를 제공합니다.
드래그 앤 드롭을 구현하는 방법
드래그 앤 드롭을 구현하려면 2단계 프로세스를 따라야 합니다.
1단계 - 개체를 드래그 가능하게 만들기
HTML5에서 드래그 앤 드롭을 구현하려면 먼저 개체를 드래그 가능하게 만들어야 합니다.
요소를 드래그하려면 해당 요소에 대해 draggable 속성을 true로 설정해야 합니다. 드래그되는 데이터를 저장하는 dragstart에 대한 이벤트 리스너를 설정합니다. 이벤트 리스너 dragstart는 허용되는 효과(복사, 이동, 링크 또는 일부 조합)를 설정합니다.
예시
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
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 in HTML5</h2>
<div>Try to drag the green 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> 2단계 - 개체 놓기
드롭을 수락하려면 놓기 대상이 최소 3개의 이벤트를 수신해야 합니다.
dragenter 이벤트는 놓기 대상이 놓기를 허용할지 여부를 결정하는 데 사용됩니다. 드롭이 수락되려면 이 이벤트가 취소되어야 합니다. 사용자에게 표시할 피드백을 결정하는 데 사용되는 드래그오버 이벤트입니다.
한 개체를 다른 개체에 드롭하는 방법은 다음과 같습니다.
예시
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop in HTML5</h2>
<div>Try to move the green box into the blue box.</div>
<div id="boxA" draggable="true"
ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(ev)"
ondrop="return dragDrop(ev)"
ondragover="return dragOver(ev)">Dustbin
</div>
</center>
</body>
</html>