[javascript] 드래그 앤 드롭 기능을 사용한 웹사이트용 할 일 목록 구현 방법

29 Nov 2023

javascript

웹 앱을 개발할 때 할 일 목록을 구현하는 것은 일반적인 요구사항입니다. 할 일 목록에는 항목을 추가하고 수정하며, 드래그 앤 드롭 기능을 통해 항목들을 재정렬할 수 있는 기능이 필요합니다.

이 글에서는 JavaScript를 사용하여 드래그 앤 드롭 기능을 구현하는 방법에 대해 알아보겠습니다.

1. HTML 마크업 작성하기

할 일 목록을 구성하는 요소들을 HTML로 작성해야 합니다. 예를 들어, ul 태그와 각 항목의 li 태그를 사용하여 목록을 구성할 수 있습니다.

<ul id="todo-list">
  <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('#todo-list li');
let draggedItem = null;

items.forEach(item => {
  item.addEventListener('dragstart', () => {
    draggedItem = item;
  });

  item.addEventListener('dragover', e => {
    e.preventDefault();
  });

  item.addEventListener('drop', e => {
    e.preventDefault();
    item.before(draggedItem);
  });
});

위 코드에서 const items는 드래그 앤 드롭이 가능한 항목들을 선택합니다. dragstart 이벤트는 드래그가 시작될 때 실행되고, 해당 항목을 draggedItem 변수에 할당합니다. dragover 이벤트는 드래그한 항목을 올릴 때 실행되고, 이벤트 기본 동작인 “항목을 올려놓는 것”을 취소합니다. drop 이벤트는 항목을 드롭했을 때 실행되고, item.before(draggedItem)을 통해 항목의 위치를 변경합니다.

3. 추가 기능 구현하기

할 일 목록을 구현하는 데 있어서 추가적인 기능을 추가할 수 있습니다. 예를 들어, 새로운 항목을 추가하는 기능을 구현해보겠습니다.

const addButton = document.getElementById('add-button');
const input = document.getElementById('input-field');

addButton.addEventListener('click', () => {
  const newItem = document.createElement('li');
  newItem.draggable = true;
  newItem.textContent = input.value;
  input.value = '';
  
  newItem.addEventListener('dragstart', () => {
    draggedItem = newItem;
  });

  newItem.addEventListener('dragover', e => {
    e.preventDefault();
  });

  newItem.addEventListener('drop', e => {
    e.preventDefault();
    newItem.before(draggedItem);
  });

  document.getElementById('todo-list').appendChild(newItem);
});

위 코드에서 addButton은 추가 버튼 역할을 하고, input은 새로운 항목의 내용을 입력하는 역할을 합니다. 이 버튼을 클릭하면 새로운 항목이 추가되고, 이 항목 역시 드래그 앤 드롭 기능을 가지도록 이벤트 리스너를 추가합니다.

결론

이전에 구현한 방법을 따라하면 드래그 앤 드롭 기능을 갖춘 웹사이트용 할 일 목록을 구현할 수 있습니다. 드래그 앤 드롭 기능은 사용자에게 직관적이고 편리한 사용자 경험을 제공할 수 있기 때문에 많이 사용되고 있습니다.