[javascript] 드래그 앤 드롭 기능을 사용하여 웹사이트에서 폴더 정리 기능 추가하기

29 Nov 2023

javascript

웹사이트에서 파일이나 폴더를 드래그 앤 드롭으로 이동시키는 기능은 사용자 경험을 향상시키는 매우 유용한 도구입니다. 이번 글에서는 JavaScript를 사용하여 웹사이트에 폴더 정리 기능을 추가하는 방법에 대해 알아보겠습니다.

HTML 마크업

먼저, HTML 마크업에서 폴더를 나타낼 요소를 생성해야 합니다. 이 예제에서는 <div> 요소를 사용하여 폴더를 표현하겠습니다.

<div class="folder" draggable="true">
  <img src="folder-icon.png" alt="Folder Icon">
  <span>폴더 이름</span>
</div>

위의 코드에서 .folder 클래스는 CSS 스타일링을 위해 사용되며, draggable="true" 속성은 해당 요소를 드래그 앤 드롭 가능하게 만듭니다. 폴더 아이콘과 폴더 이름은 적절한 이미지와 텍스트로 대체해야 합니다.

JavaScript 이벤트 처리

이제 JavaScript를 사용하여 폴더를 드래그 앤 드롭할 수 있는 기능을 추가해보겠습니다. 먼저, 드래그 앤 드롭 이벤트를 처리할 수 있는 함수를 작성해야 합니다.

function handleDragStart(e) {
  // 드래그 시작 시 필요한 작업 수행
  e.dataTransfer.setData('text/plain', e.target.id); // 드래그된 요소의 ID 저장
  e.target.classList.add('dragging'); // 드래그 중인 요소에 클래스 추가
}

function handleDragOver(e) {
  e.preventDefault(); // 기본 동작 막기
}

function handleDrop(e) {
  e.preventDefault();
  const draggedElementId = e.dataTransfer.getData('text/plain'); // 저장된 드래그된 요소의 ID 가져오기
  const draggedElement = document.getElementById(draggedElementId); // ID로 해당 요소 가져오기
  
  // 드롭된 위치에 요소 삽입
  e.target.appendChild(draggedElement);
  
  // 기타 필요한 작업 수행
}

function handleDragEnd(e) {
  e.target.classList.remove('dragging'); // 드래그 종료 시 클래스 제거
}

위의 코드에서 handleDragStart 함수는 드래그 시작 시 호출되며, 드래그된 요소의 ID를 저장하고 해당 요소에 dragging 클래스를 추가합니다. handleDragOver 함수는 드래그된 요소가 드롭 영역 위에 있을 때 호출되며, 기본 동작을 막습니다. handleDrop 함수는 드롭되는 순간 호출되어 드래그된 요소를 드롭된 위치에 삽입합니다. 마지막으로 handleDragEnd 함수는 드래그 종료 시 호출되어 dragging 클래스를 제거합니다.

이벤트 등록하기

마지막으로, 위에서 작성한 이벤트 처리 함수들을 요소에 등록해야 합니다. 폴더 요소에 dragstart, dragover, drop, dragend 이벤트에 대한 처리 함수를 등록합니다.

const folderElement = document.querySelector('.folder');
folderElement.addEventListener('dragstart', handleDragStart);
folderElement.addEventListener('dragover', handleDragOver);
folderElement.addEventListener('drop', handleDrop);
folderElement.addEventListener('dragend', handleDragEnd);

CSS 스타일링

추가로 폴더 요소에 CSS 스타일링을 적용하여 드래그 앤 드롭 시 시각적인 효과를 줄 수 있습니다. 예를 들어, 드래그 중인 폴더에 테두리를 추가하거나 배경색을 변경할 수 있습니다.

.folder {
  /* 기본 스타일 */
}

.folder.dragging {
  border: 2px dashed #ccc;
  background-color: #f5f5f5;
}

위의 코드에서 .folder.dragging 클래스는 드래그 중인 폴더에 적용되는 스타일을 정의합니다.

결론

이제 웹사이트에서 폴더를 드래그 앤 드롭으로 정리할 수 있는 기능을 추가하는 방법에 대해 알아보았습니다. JavaScript를 사용하여 이벤트 처리하고, HTML과 CSS를 사용하여 마크업과 스타일링을 구성했습니다. 사용자 경험을 향상시키고 웹사이트의 기능성을 높이기 위해 드래그 앤 드롭 기능을 적용해보세요.

HTML 마크업

JavaScript 이벤트 처리

이벤트 등록하기

CSS 스타일링

결론

참고 자료