Colin's Blog
[javascript] 예측 가능한 드래그 앤 드롭 기능 구현 방법

드래그 앤 드롭은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 요소를 마우스로 클릭하고 드래그하여 다른 위치로 이동시키는 것을 허용하는 기능입니다. 이 기능을 예측 가능하게 구현하는 것은 사용자 경험을 향상시키는 데 도움이 됩니다.

1. 드래그 앤 드롭 이벤트 처리

드래그 앤 드롭 이벤트를 처리하기 위해 다음과 같은 JavaScript 이벤트를 사용할 수 있습니다.

2. 드래그 대상 및 드롭 대상 설정

드래그 앤 드롭을 구현하기 위해 드래그 대상과 드롭 대상을 설정해야 합니다. 드래그 대상은 사용자가 실제로 클릭하고 드래그할 요소를 말하며, 드롭 대상은 드래그된 요소를 이동시키는 위치입니다.

드래그 대상 요소에 draggable 속성을 추가하고, 드롭 대상 요소에는 dragover 이벤트를 이용하여 드래그 대상을 이동시킬 수 있도록 처리합니다.

<div class="drag-source" draggable="true">드래그 대상 요소</div>
<div class="drop-target">드롭 대상 요소</div>

const dragSources = document.querySelectorAll('.drag-source');
const dropTargets = document.querySelectorAll('.drop-target');

// 드래그 대상 요소 이벤트 처리
dragSources.forEach((dragSource) => {
    dragSource.addEventListener('dragstart', handleDragStart);
    dragSource.addEventListener('dragend', handleDragEnd);
});

// 드롭 대상 요소 이벤트 처리
dropTargets.forEach((dropTarget) => {
    dropTarget.addEventListener('dragenter', handleDragEnter);
    dropTarget.addEventListener('dragover', handleDragOver);
    dropTarget.addEventListener('dragleave', handleDragLeave);
    dropTarget.addEventListener('drop', handleDrop);
});

// 드래그 시작 시 실행되는 함수
function handleDragStart(event) {
    // 드래그 대상 요소에 대한 설정
    event.dataTransfer.setData('text/plain', event.target.id);
    event.target.style.opacity = '0.5';
}

// 드래그 종료 시 실행되는 함수
function handleDragEnd(event) {
    event.target.style.opacity = '1';
}

// 드래그된 요소가 드롭 대상 위로 이동할 때 실행되는 함수
function handleDragEnter(event) {
    event.preventDefault();
    event.target.classList.add('dragover');
}

// 드롭 대상 위에서 드래그하여 이동할 때 실행되는 함수
function handleDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
}

// 드래그된 요소가 드롭 대상 영역을 벗어날 때 실행되는 함수
function handleDragLeave(event) {
    event.target.classList.remove('dragover');
}

// 드래그된 요소가 드롭되었을 때 실행되는 함수
function handleDrop(event) {
    event.preventDefault();
    const dragSourceId = event.dataTransfer.getData('text/plain');
    const dragSource = document.getElementById(dragSourceId);
    event.target.appendChild(dragSource);
    event.target.classList.remove('dragover');
}

위의 예시 코드에서는 drag-source 클래스를 가진 요소가 드래그 대상 요소이며, drop-target 클래스를 가진 요소가 드롭 대상 요소입니다. 드래그 및 드롭 이벤트를 처리하는 함수들을 정의하고 요소에 이벤트를 추가하는 방식으로 구현할 수 있습니다.

3. 스타일링 및 애니메이션 추가

드래그 및 드롭 이벤트를 처리하는 JavaScript 코드 외에도 스타일링 및 애니메이션을 추가하여 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 드래그 중인 요소를 투명하게 만들거나 드롭 대상 위로 이동할 때 애니메이션 효과를 추가할 수 있습니다.

.drag-source {
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
}

.drop-target {
    background-color: #e0e0e0;
    padding: 10px;
    margin-bottom: 10px;
}

.dragover {
    border: 2px dashed #000;
}

위의 CSS 코드는 드래그 대상과 드롭 대상에 기본적인 스타일을 적용합니다. 드롭 대상이 드래그 대상 위로 이동할 때는 dragover 클래스를 추가하여 테두리를 점선으로 표시합니다.

드래그 앤 드롭 기능은 사용자가 요소를 이동시키는 데 매우 유용한 기능입니다. 예측 가능하게 구현하면 사용자 경험을 향상시킬 수 있으므로, 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다.

참고 자료:

© 2018 Colin. All rights reserved.