[javascript] 드래그 앤 드롭 기능을 사용한 웹 메뉴 구현 방법

29 Nov 2023

javascript

웹 애플리케이션에서 사용자에게 친숙한 드래그 앤 드롭 기능은 사용자 경험을 향상시키는 데 큰 도움이 됩니다. 이 기능을 활용하여 웹 메뉴를 구현하는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정

먼저, 드래그 앤 드롭 기능을 구현하기 위해 HTML 구조를 설정해야 합니다. 일반적으로는 <ul>과 <li> 태그를 사용하여 메뉴를 구성하는 것이 일반적입니다. 각 메뉴 아이템에는 드래그 이벤트를 설정하기 위한 draggable 속성을 추가해야 합니다. 예를 들면 다음과 같습니다.

<ul>
  <li draggable="true">메뉴 1</li>
  <li draggable="true">메뉴 2</li>
  <li draggable="true">메뉴 3</li>
</ul>

2. 드래그 이벤트 처리

다음으로, 드래그 이벤트를 처리하기 위해 JavaScript 코드를 작성해야 합니다. 드래그 앤 드롭 기능을 구현하기 위해 dragstart, dragover, drop 이벤트를 사용합니다.

const items = document.querySelectorAll('li');

// 드래그 시작
function handleDragStart(e) {
  this.style.opacity = '0.4';
  // 필요한 경우 다른 작업 수행
}

// 드래그된 항목 위에 마우스를 가져가면 발생
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // 기본 동작 방지
  }
  this.classList.add('over');
  // 필요한 경우 다른 작업 수행
  return false;
}

// 드롭 시 발생
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation(); // 부모 요소로의 이벤트 전파 방지
  }
  // 드롭된 항목의 순서 변경
  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
  // 필요한 경우 다른 작업 수행
  return false;
}

// 드래그가 끝날 때 발생
function handleDragEnd(e) {
  this.style.opacity = '1';
  items.forEach(item => item.classList.remove('over'));
  // 필요한 경우 다른 작업 수행
}

items.forEach(item => {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragover', handleDragOver);
  item.addEventListener('drop', handleDrop);
  item.addEventListener('dragend', handleDragEnd);
});

3. CSS 스타일링

드래그 앤 드롭 기능을 시각적으로 제공하기 위해 CSS 스타일링을 적용해야 합니다. over 클래스를 사용하여 드래그된 메뉴 항목 위에 시각적인 효과를 줄 수 있습니다. 예를 들면 다음과 같습니다.

li {
  cursor: move;
}

li.over {
  background-color: lightblue;
}

위의 CSS 코드에서는 드래그된 메뉴 항목 위에 배경색이 변경되도록 설정하였습니다. 필요에 따라 다른 스타일링을 적용할 수 있습니다.

마치며

드래그 앤 드롭 기능을 사용하여 웹 메뉴를 구현할 수 있습니다. 이를 통해 사용자는 직관적이고 즐겁게 메뉴를 선택하고 이동할 수 있습니다. 이는 웹 애플리케이션의 사용성을 향상시키는 데 큰 도움이 될 것입니다. 코드를 참고하여 자신만의 웹 메뉴를 구현해 보세요!

참고 자료:

MDN Web Docs - Drag and Drop