HTML5에서는 draggable 속성을 사용하여 마우스로 끌어서 이동할 수 있는 드래그 가능한 단락을 간단히 만들 수 있습니다.
이 속성은 true와 false 두 가지 값을 가집니다. true로 설정하면 해당 요소의 드래그가 활성화되고, false로 설정하면 드래그가 비활성화됩니다.
draggable 속성의 주요 이벤트
드래그 앤 드롭 기능을 완성하려면 다음과 같은 자바스크립트 이벤트를 함께 활용하는 것이 좋습니다.
- dragstart – 드래그가 시작될 때 발생합니다. dataTransfer 객체에 데이터를 설정합니다.
- drag – 요소를 드래그하는 동안 지속적으로 발생합니다.
- dragover – 드롭 대상 위에 드래그 중일 때 발생하며, 반드시 preventDefault()를 호출해야 드롭이 허용됩니다.
- drop – 대상 영역에 요소를 놓았을 때 발생합니다.
예제 코드
아래 예제 코드를 실행하면 두 개의 박스 사이에서 단락을 자유롭게 드래그 앤 드롭할 수 있습니다. 왼쪽 박스의 문단을 오른쪽으로 옮기거나, 그 반대로도 이동해 보세요.
<!DOCTYPE HTML>
<html>
<head>
<style>
.drag {
float: left;
width: 100px;
height: 75px;
border: 1px dashed #876587;
margin: 15px;
padding: 10px;
}
</style>
</head>
<body>
<div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
<p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)"
draggable = "true" id = "dragtarget">This is demo paragraph to be dragged!</p>
</div>
<div class = "drag" ondrop="drop(event)" ondragover = "dropNow(event)"></div>
<div id="box"></div>
<p>Drag the left box to the right or drag the right box to the left.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function draggingNow(event) {
document.getElementById("box").innerHTML = "Dragged successfully!";
}
function dropNow(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("box").innerHTML = "The element dropped successfully!";
}
</script>
</body>
</html>코드 설명
- 드래그할 단락에는
draggable="true"를 설정하여 드래그를 활성화했습니다. dragStart()함수는 드래그 시작 시dataTransfer.setData()로 요소의 id를 저장합니다.dropNow()함수에서event.preventDefault()를 호출해야 해당 영역에 요소를 놓을 수 있습니다.drop()함수는 저장된 데이터를 가져와 새 위치에 요소를 추가하고, 성공 메시지를 화면에 표시합니다.
이처럼 draggable 속성과 몇 가지 이벤트 핸들러만 조합하면 별도의 라이브러리 없이도 순수 HTML5와 자바스크립트만으로 드래그 앤 드롭 인터페이스를 손쉽게 구현할 수 있습니다.