HTML에서 요소를 드래그할 수 있는지 여부를 설정하려면 draggable 속성을 사용합니다. 이 속성은 true와 false 두 가지 값으로 설정할 수 있으며, true로 지정된 요소만 마우스로 끌어서 이동할 수 있습니다.
draggable 속성이란?
draggable은 HTML5에서 도입된 전역 속성으로, 해당 요소가 사용자에 의해 드래그될 수 있는지를 지정합니다. 이미지와 링크(<a> 태그)는 기본적으로 드래그가 가능하지만, <div>나 <p> 같은 일반 요소는 draggable="true"를 명시적으로 설정해야 드래그할 수 있습니다.
예제
다음 코드를 실행하면 draggable 요소를 구현하고, 왼쪽 상자를 오른쪽으로 또는 오른쪽 상자를 왼쪽으로 드래그해 옮겨볼 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
.drag {
float: left;
width: 100px;
height: 35px;
border: 2px 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">Drag!</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>
주요 이벤트 설명
- ondragstart: 드래그가 시작되는 순간 발생하며, dataTransfer 객체에 드래그할 데이터(여기서는 요소의 id)를 저장합니다.
- ondrag: 요소가 드래그되는 동안 지속적으로 발생하는 이벤트입니다.
- ondragover: 드래그한 요소가 드롭 대상 위에 있을 때 발생하며, 반드시
event.preventDefault()를 호출해야 드롭이 허용됩니다. - ondrop: 요소가 실제로 드롭되었을 때 발생하며, 저장해 둔 데이터를 가져와 드롭 대상에 추가합니다.
이처럼 draggable 속성과 함께 드래그 관련 이벤트를 조합하면 파일 업로드, 목록 순서 변경, 칸반 보드 등 다양한 드래그 앤 드롭 인터페이스를 자바스크립트만으로 구현할 수 있습니다.