드래그 앤 드롭 인터랙션은 현대적인 웹 애플리케이션에서 매우 일반적으로 사용되는 기능 중 하나입니다. 이 기능은 사용자가 요소를 마우스로 끌어다가 다른 위치로 이동시킬 수 있게 해줍니다. 이번 블로그 포스트에서는 자바스크립트와 CSS Grid를 사용하여 간단한 드래그 앤 드롭 인터랙션을 구현하는 방법에 대해 알아보겠습니다.

Step 1: HTML 구조 설정하기

먼저 HTML 구조를 설정해야 합니다. 드래그 앤 드롭을 구현하려는 요소들을 HTML로 생성합니다. 예를 들어, 드래그할 수 있는 박스들을 <div> 요소로 만들 수 있습니다. 각 박스에는 드래그 이벤트를 처리하기 위해 클래스 또는 아이디를 지정해줍니다.

<div class="draggable-box" draggable="true">박스 1</div>
<div class="draggable-box" draggable="true">박스 2</div>
<div class="draggable-box" draggable="true">박스 3</div>

Step 2: CSS Grid 적용하기

CSS Grid를 사용하여 드래그 가능한 박스들을 그리드 형태로 배치할 수 있습니다. 이를 위해 부모 컨테이너에 display: grid 속성을 지정하고, 각 박스를 적절한 그리드 셀에 배치합니다. 그리드 셀 크기를 조정하여 원하는 배치 형태를 만들 수 있습니다.

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

Step 3: 자바스크립트로 드래그 앤 드롭 이벤트 처리하기

이제 자바스크립트를 사용하여 드래그 앤 드롭 이벤트를 처리할 수 있습니다. 먼저 드래그 시작, 드래그 중, 드롭 완료 이벤트에 대한 이벤트 리스너를 등록합니다. 이벤트 리스너 내에서 요소를 이동시키는 로직을 구현합니다.

const boxes = document.querySelectorAll('.draggable-box');

let currentlyDragged = null;

boxes.forEach(box => {
  box.addEventListener('dragstart', (e) => {
    currentlyDragged = e.target; // 현재 드래그 중인 박스 저장
    setTimeout(() => {
      e.target.classList.add('invisible'); // 드래그 중인 박스를 투명하게 만듦
    }, 0);
  });

  box.addEventListener('dragover', (e) => {
    e.preventDefault(); // 기본 드롭 동작 방지
  });

  box.addEventListener('drop', (e) => {
    e.preventDefault();
    e.target.classList.remove('invisible'); // 드롭할 위치에 있는 박스에 투명 클래스 제거
    if (currentlyDragged !== e.target) {
      e.target.parentNode.insertBefore(currentlyDragged, e.target); // 드래그한 박스를 드롭할 위치로 이동
    }
    currentlyDragged = null;
  });
});

Step 4: 스타일링

마지막으로 드래그 가능한 박스들을 원하는 스타일로 꾸며줄 수 있습니다. 예를 들어, 박스에 그림자 효과를 주거나 배경색을 변경할 수 있습니다.

.draggable-box {
  width: 100px;
  height: 100px;
  background-color: #e0e0e0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

이제 자바스크립트와 CSS Grid를 사용하여 간단한 드래그 앤 드롭 인터랙션을 구현할 준비가 되었습니다. 위의 코드를 따라하면 사용자가 마음대로 박스를 드래그하여 배치할 수 있는 인터랙티브한 웹 페이지를 만들 수 있습니다.

#javascript #cssgrid