[javascript] 드래그 앤 드롭 기능을 가진 웹 애플리케이션 예제 구현하기
이번 예제에서는 JavaScript를 사용하여 드래그 앤 드롭 기능을 가진 웹 애플리케이션을 구현해보겠습니다.
요구사항
- HTML, CSS, JavaScript를 사용하여 웹 애플리케이션을 구현해야 합니다.
- 드래그 앤 드롭 기능을 구현해야 합니다.
- 드래그 가능한 요소는 “drag-item” 클래스를 가지고 있어야 합니다.
- 드롭 영역은 “drop-area” 클래스를 가지고 있어야 합니다.
구현 방법
HTML
먼저, HTML 파일을 열고 드래그 가능한 요소와 드롭 영역을 마크업합니다.
<!DOCTYPE html>
<html>
<head>
<title>드래그 앤 드롭 예제</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="drop-area">
드롭 영역입니다.
</div>
<div class="drag-item" draggable="true">
드래그 가능한 요소
</div>
<script src="script.js"></script>
</body>
</html>
CSS
다음으로, CSS 파일을 생성하고 스타일을 적용합니다.
.drop-area {
width: 400px;
height: 300px;
border: 2px dashed black;
text-align: center;
line-height: 300px;
}
.drag-item {
width: 200px;
height: 50px;
background-color: #ccc;
margin: 10px;
text-align: center;
line-height: 50px;
}
JavaScript
마지막으로, JavaScript 파일을 생성하고 드래그 앤 드롭 기능을 구현합니다.
document.addEventListener('DOMContentLoaded', function() {
const dragItems = document.querySelectorAll('.drag-item');
const dropArea = document.querySelector('.drop-area');
dragItems.forEach(function(dragItem) {
dragItem.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', dragItem.innerText);
});
});
dropArea.addEventListener('dragover', function(e) {
e.preventDefault();
});
dropArea.addEventListener('drop', function(e) {
e.preventDefault();
const text = e.dataTransfer.getData('text/plain');
dropArea.innerText = text;
});
});
실행하기
모든 파일과 코드를 준비한 뒤, 웹 브라우저에서 HTML 파일을 열어서 드래그 앤 드롭 기능을 확인할 수 있습니다. 드래그 가능한 요소를 드래그하여 드롭 영역에 드롭하면 해당 텍스트가 드롭 영역에 표시됩니다.