[javascript] 드래그 앤 드롭(Drag and Drop)

드래그 앤 드롭(Drag and Drop)

드래그 앤 드롭(Drag and Drop)은 마우스로 요소를 선택(드래그)하여 다른 위치로 이동(드롭)하는 기능이다. html5의 Drag and Drop API또는 마우스 이벤트(mousedown, mousemove, mouseup)을 활용해 구현할 수 있다.

주요 기능

1. 드래그 가능한 요소 설정

   • 드래그할 수 있는 요소를 정의하고 이벤트를 연결한다.
   • draggable="true" 속성을 추가하거나, 직접 마우스 이벤트를 활용할 수 있다.

2. 드래그 시작 이벤트(dragstart or mousedown)

   • 요소가 드래그되기 시작할 때 실행된다.
   • 이동할 데이터를 설정하거나, 드래그 효과를 적용한다.

3. 드래그 중 이벤트(drag or mousemove)

   • 드래그 하는 동안 요소의 위치를 업데이트한다.
   • 특정 조건(예: 특정 영역 내부에서만 이동 가능)을 적용할 수 있다.

4. 드래그 종료 이벤트(dragend or mouseup)

   • 드래그가 끝나면 요소를 새로운 위치에 배치한다.
   • 필요하다면 원래 위치로 되돌리는 로직도 추가한다.

5. 드롭 영역 설정

   • 요소가 특정 영역에 도달했을 때만 놓을 수 있도록 한다.
   • dragover 이벤트에서 기본 동작을 막아야 한다.(event.preventDefault() 필요).

6. 드래그 제한 및 조건부 로직

   • 특정 영역에서만 드래그를 가능하도록 한다.
   • 드래그할 수 있는 요소를 특정 그룹으로 제한할 수 있다.

7. 애니메이션 및 사용자 경험 개선

   • 드래그 중 스타일을 변경하여 가시성을 높인다.
   • 요소가 이동할 때 부드러운 애니메이션을 추가한다.

---

구현 방식 선택

방법 1: HTML5 Drag & Drop API 활용

HTML5의 draggable 속성과 dragstart, drop 이벤트를 활용하는 방식이다.

🔹 장점

• HTML5 기본 기능이라 라이브러리 없이도 사용 가능
• 기본적인 브라우저 지원이 좋음

🔹 단점

• 모바일 지원이 제한적
• 요소 이동이 부드럽지 않음

방법 2: 마우스 이벤트(mousedown, mousemove, mouseup) 활용

드래그할 요소의 위치를 직접 조작하는 방식이다.

🔹 장점

• 모바일 및 터치 이벤트와 쉽게 결합 가능
• 더 자연스러운 움직임 구현 가능

🔹 단점

• 직접 좌표 계산 및 충돌 처리를 해야 함

---

예제 코드 (마우스 이벤트 활용)

📝 기본적인 드래그 앤 드롭 구현 (Vanilla JS)

document.addEventListener("DOMContentLoaded", () => {
    const draggable = document.getElementById("draggable");
    let offsetX = 0, offsetY = 0;
    let isDragging = false;

    draggable.addEventListener("mousedown", (e) => {
        isDragging = true;
        offsetX = e.clientX - draggable.getBoundingClientRect().left;
        offsetY = e.clientY - draggable.getBoundingClientRect().top;
        draggable.style.position = "absolute";
        draggable.style.zIndex = "1000";
    });

    document.addEventListener("mousemove", (e) => {
        if (!isDragging) return;
        draggable.style.left = `${e.clientX - offsetX}px`;
        draggable.style.top = `${e.clientY - offsetY}px`;
    });

    document.addEventListener("mouseup", () => {
        isDragging = false;
    });
});

드롭 영역 추가

const dropZone = document.getElementById("dropZone");

dropZone.addEventListener("mouseup", () => {
    if (isDragging) {
        draggable.style.left = `${dropZone.getBoundingClientRect().left}px`;
        draggable.style.top = `${dropZone.getBoundingClientRect().top}px`;
    }
});

---

추가적인 기능 고려

• 그리드 기반 정렬: 드래그 후 특정 위치로 스냅(Snap) 되도록 구현
• 애니메이션 효과: CSS transition 활용하여 부드러운 이동
• 터치 이벤트 지원: 모바일 환경 대응 (touchstart, touchmove, touchend 활용)
• 다중 드래그 지원: 여러 개의 요소를 드래그 가능하도록 구현
• 리스트 재정렬: 드래그하여 순서를 변경하는 기능 (sortable list)