자바스크립트를 활용한 CSS Grid 레이아웃의 드래그 앤 드롭 기능 구현하기

18 Sep 2023

드래그 앤 드롭은 웹 애플리케이션에서 사용자가 요소를 마우스로 끌어다가 다른 위치로 이동시키는 기능을 의미합니다. 이번 포스트에서는 자바스크립트를 활용하여 CSS Grid 레이아웃에서 드래그 앤 드롭 기능을 구현하는 방법을 알아보겠습니다.

1. 드래그 앤 드롭 이벤트

드래그 앤 드롭 기능을 구현하려면 먼저 드래그될 요소와 드롭될 요소를 구별해야 합니다. 이를 위해 다음과 같은 이벤트를 사용할 수 있습니다.

// 드래그 앤 드롭 시작 이벤트
element.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
});

// 드롭 이벤트
element.addEventListener('drop', function(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
  var draggedElement = document.getElementById(data);
  event.target.appendChild(draggedElement);
});

// 드래그 요소가 드롭 영역 위에 올라왔을 때의 이벤트
element.addEventListener('dragover', function(event) {
  event.preventDefault();
});

2. CSS Grid 레이아웃

드래그 앤 드롭 기능을 CSS Grid 레이아웃에 적용하기 위해서는 드래그될 요소와 드롭 영역을 CSS Grid로 디자인해야 합니다. 예를 들어, 다음과 같이 CSS Grid 스타일을 적용할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

3. 예제 코드

다음은 실제 예제 코드입니다. 3x3 그리드로 구성된 드래그 앤 드롭 기능을 구현하였습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .grid-item {
      background-color: #ddd;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item" draggable="true" id="item1">Item 1</div>
    <div class="grid-item" draggable="true" id="item2">Item 2</div>
    <div class="grid-item" draggable="true" id="item3">Item 3</div>
    <div class="grid-item" draggable="true" id="item4">Item 4</div>
    <div class="grid-item" draggable="true" id="item5">Item 5</div>
    <div class="grid-item" draggable="true" id="item6">Item 6</div>
    <div class="grid-item" draggable="true" id="item7">Item 7</div>
    <div class="grid-item" draggable="true" id="item8">Item 8</div>
    <div class="grid-item" draggable="true" id="item9">Item 9</div>
  </div>

  <script>
    var gridItems = document.querySelectorAll('.grid-item');

    gridItems.forEach(function(item) {
      item.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
      });

      item.addEventListener('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData('text/plain');
        var draggedElement = document.getElementById(data);
        event.target.appendChild(draggedElement);
      });

      item.addEventListener('dragover', function(event) {
        event.preventDefault();
      });
    });
  </script>
</body>
</html>

이렇게 작성한 코드를 실행시켜보면, 드래그 앤 드롭 기능이 CSS Grid 레이아웃에 적용된 것을 확인할 수 있습니다.

이상으로 자바스크립트를 활용하여 CSS Grid 레이아웃의 드래그 앤 드롭 기능을 구현하는 방법에 대해 알아보았습니다. 이를 참고하여 웹 애플리케이션에서 유용한 드래그 앤 드롭 인터랙션을 구현해보세요.

#javascript #CSSGrid #드래그앤드롭