[javascript] 드래그 앤 드롭 기능을 이용하여 웹페이지에서 다중 선택 기능 추가하기

29 Nov 2023

javascript

웹페이지에서 다중 선택 기능을 추가하고 싶다면 드래그 앤 드롭 기능을 활용할 수 있습니다. 이 기능을 통해 사용자는 여러 개의 항목을 동시에 선택할 수 있으며, 이는 특히 파일 업로드, 이미지 선택 등 다양한 상황에서 유용하게 사용될 수 있습니다.

HTML 구조 만들기

다중 선택 기능을 구현하려면 HTML 구조를 먼저 만들어야 합니다. 선택 가능한 항목들을 아이템으로 갖는 컨테이너를 만들고, 각 아이템들을 드래그 앤 드롭할 수 있는 요소로 만들어야 합니다.

<div class="container">
  <div class="item" draggable="true">아이템 1</div>
  <div class="item" draggable="true">아이템 2</div>
  <div class="item" draggable="true">아이템 3</div>
</div>

드래그 앤 드롭 이벤트 핸들러 추가하기

드래그 앤 드롭 이벤트를 처리하기 위해 JavaScript를 사용해야 합니다. 아래의 코드를 이용하여 드래그 앤 드롭 이벤트와 관련된 이벤트 핸들러를 추가할 수 있습니다.

const items = document.querySelectorAll('.item');
let selectedItems = [];

items.forEach(item => {
  item.addEventListener('dragstart', () => {
    // 드래그 시작 시 선택된 아이템을 selectedItems에 추가
    selectedItems.push(item);
  });

  item.addEventListener('dragend', () => {
    // 드래그 종료 시 selectedItems 초기화
    selectedItems = [];
  });

  item.addEventListener('click', () => {
    // 클릭 시 선택된 아이템을 selectedItems에 추가
    selectedItems.push(item);
  });
});

선택된 항목 스타일 변경하기

이제 드래그 앤 드롭 이벤트를 처리하는 코드가 준비되었으니 선택된 항목에 스타일을 적용할 수 있습니다. 선택된 항목은 selected 클래스를 추가하여 스타일을 변경할 수 있습니다.

.selected {
  background-color: yellow;
}

이제 사용자가 아이템을 클릭하거나 드래그하여 선택할 수 있으며, 선택된 항목의 배경색이 노란색으로 변경됩니다.

결론

드래그 앤 드롭을 활용하여 웹페이지에서 다중 선택 기능을 추가하는 방법을 알아보았습니다. 이를 통해 사용자는 여러 개의 항목을 쉽게 선택하고, 선택된 항목에 대한 작업을 한 번에 수행할 수 있습니다.

참고 자료

MDN Web Docs - 드래그 앤 드롭 API 소개