드래그(Drag)와 드롭(Drop) 기능을 구현하기 위해서는 다음과 같은 기능이 필요합니다.
-
Drag 이벤트: 객체를 드래그할 때 발생하는 이벤트입니다. 객체를 선택하고 드래그하는 동안 마우스 커서의 위치를 계속 추적해야 합니다. 이를 위해 dragstart, drag, dragend와 같은 이벤트를 사용할 수 있습니다. -
데이터 전달: 드래그된 객체를 드롭 영역으로 전달하기 위해 데이터를 설정해야 합니다. 이를 위해 setData 메서드를 사용하여 드래그 시작 시 데이터를 설정하고, 드롭 시 getData 메서드를 사용하여 해당 데이터를 가져옵니다. 일반적으로는 객체의 ID나 다른 식별자를 데이터로 설정합니다. -
Dragover 이벤트: 드롭 영역 위에서 드래그 중인 객체가 지원되는 드롭을 허용하기 위해 발생하는 이벤트입니다. 드롭 영역 위에서 드래그 중인 객체를 허용하려면 이 이벤트를 처리하여 기본 동작을 취소해야 합니다. -
Drop 이벤트: 드롭 영역에 객체를 드롭할 때 발생하는 이벤트입니다. 드롭 영역에 객체를 추가하고 이동시키는 등의 작업을 수행해야 합니다. 이때 드롭 이벤트를 처리하여 필요한 작업을 수행할 수 있습니다.
이 외에도 객체의 위치 업데이트, 드래그 중인 객체의 스타일 변경, 다중 객체 선택 및 드롭 처리, 드롭 영역의 영역 체크 등 추가적인 기능을 구현할 수 있습니다.
구현한 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drag & drop</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #f44336;
color: #fff;
text-align: center;
line-height: 100px;
cursor: move;
}
#dropzone {
width: 200px;
height: 200px;
background-color: #e0e0e0;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="draggable" draggable="true" ondragstart="dragStart(event)">
이동할 객체
</div>
<div id="dropzone" ondragover="dragOver(event)" ondrop="drop(event)">
드롭 영역
</div>
<script>
// 드래그 시작 시 이벤트 핸들러
function dragStart(event) {
event.dataTransfer.setData('text/plain', event.target.id);
}
// 드래그 영역에 드롭을 허용하기 위한 이벤트 핸들러
function dragOver(event) {
event.preventDefault();
}
// 드롭 시 이벤트 핸들러
function drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(data);
event.target.appendChild(draggableElement);
}
</script>
</body>
</html>
고통 속에 무언가 탄생하고 있다:-)