[javascript] 드래그 앤 드롭 효과를 사용한 웹사이트의 인터랙티브한 퀴즈 구현 방법

29 Nov 2023

javascript

웹사이트에 인터랙티브한 퀴즈를 추가하고 싶다면, 드래그 앤 드롭 효과는 재미있고 시각적으로 매력적인 방법입니다. 이 튜토리얼에서는 JavaScript를 사용하여 드래그 앤 드롭 효과를 구현하는 방법을 알아보겠습니다.

1. HTML 구조

먼저, 퀴즈를 구성하는 HTML 요소를 작성해야 합니다. 각 질문과 선택지를 나타내기 위해 <div> 요소들을 사용하고, 드래그 앤 드롭을 처리하기 위해 draggable 속성을 추가해줍니다.

<div class="quiz-item" draggable="true">
    <h2>질문 1</h2>
    <p>선택지 1</p>
</div>

<div class="quiz-item" draggable="true">
    <h2>질문 2</h2>
    <p>선택지 2</p>
</div>

<!-- 나머지 질문과 선택지들 -->

2. JavaScript 드래그 앤 드롭 이벤트 핸들링

이제 JavaScript를 사용하여 드래그 앤 드롭 이벤트를 처리하는 함수를 작성해야 합니다. 먼저, .quiz-item 클래스를 가진 요소들을 선택하고 이벤트 리스너를 추가합니다.

document.querySelectorAll('.quiz-item').forEach(question => {
    question.addEventListener('dragstart', dragStart);
    question.addEventListener('dragend', dragEnd);
});

드래그 시작 시에는 dragStart 함수가 호출되고, 드래그가 끝날 때는 dragEnd 함수가 호출됩니다.

function dragStart() {
    this.classList.add('dragging');
}

function dragEnd() {
    this.classList.remove('dragging');
}

이렇게 하면 드래그 중인 요소에 dragging 클래스가 추가되고, 드롭이 완료되면 해당 클래스가 제거됩니다.

3. 드롭 영역 설정

드래그 앤 드롭된 요소를 받을 드롭 영역을 설정해야 합니다. 드롭 영역은 퀴즈의 정답이 들어갈 위치입니다. 이 예제에서는 quiz-container라는 클래스를 가진 요소를 드롭 영역으로 사용합니다.

<div class="quiz-container">
    <div class="drop-area"></div>
</div>

4. 드롭 영역 이벤트 핸들링

드롭 영역에서 발생하는 이벤트를 처리하기 위해 JavaScript를 사용합니다. 드롭 영역에는 dragenter, dragleave, dragover, 그리고 drop 이벤트를 처리하는 함수를 추가합니다.

const dropArea = document.querySelector('.drop-area');

dropArea.addEventListener('dragenter', dragEnter);
dropArea.addEventListener('dragleave', dragLeave);
dropArea.addEventListener('dragover', dragOver);
dropArea.addEventListener('drop', dragDrop);

이제 각각의 이벤트에 대응하는 함수를 정의합니다.

function dragEnter(e) {
    e.preventDefault();
    this.classList.add('drag-enter');
}

function dragLeave() {
    this.classList.remove('drag-enter');
}

function dragOver(e) {
    e.preventDefault();
}

function dragDrop() {
    this.classList.remove('drag-enter');
    const droppedItem = document.querySelector('.dragging');
    this.appendChild(droppedItem);
}

dragEnter 함수에서는 드래그 영역에 마우스가 진입했을 때, dragLeave 함수에서는 이 영역을 벗어났을 때 drag-enter 클래스를 추가 및 제거합니다. dragOver 함수에서는 브라우저의 기본 동작을 막고, dragDrop 함수에서는 드롭된 요소를 드롭 영역에 추가합니다.

5. 스타일링

마지막으로, 드래그 앤 드롭 효과를 시각적으로 보여주기 위해 CSS 스타일을 추가합니다.

.quiz-item {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    cursor: move;
}

.quiz-item.dragging {
    opacity: 0.5;
}

.quiz-container {
    border: 2px dashed #ccc;
    padding: 10px;
}

.drop-area {
    min-height: 100px;
    background-color: #f5f5f5;
}

이제, 위의 코드를 웹사이트에 적용하면 인터랙티브한 드래그 앤 드롭 퀴즈가 구현됩니다.

이 튜토리얼에서는 JavaScript의 기본적인 드래그 앤 드롭 기능을 사용하여 퀴즈를 구현하는 방법을 알아보았습니다. 다양한 추가 기능을 적용할 수 있으며, 참고 자료와 레퍼런스를 통해 더 많은 기능을 익힐 수 있습니다.

Reference:

MDN Web Docs - Drag and Drop API