[javascript] 드래그 앤 드롭 기능을 사용하여 웹사이트에서 레이아웃 조정 기능 추가하기

29 Nov 2023

javascript

웹사이트를 제작하다 보면 사용자가 원하는대로 화면의 레이아웃을 조정할 수 있는 기능이 필요할 때가 있습니다. 이때 드래그 앤 드롭 기능을 활용하면 사용자가 쉽게 레이아웃을 조정할 수 있습니다. 이번 글에서는 JavaScript를 사용하여 드래그 앤 드롭 기능을 구현하는 방법을 알아보겠습니다.

HTML 구조 설정하기

먼저, 드래그 앤 드롭 기능을 추가할 요소들을 HTML에서 설정해야 합니다. 예를 들어, 드래그해서 이동할 수 있는 레이아웃 요소들을 <div> 태그로 생성합니다. 이때 각 요소에는 고유한 식별자를 부여하여 나중에 이동된 위치를 파악할 수 있도록 합니다. 아래는 예시입니다.

<div id="draggable-1" class="draggable">레이아웃 1</div>
<div id="draggable-2" class="draggable">레이아웃 2</div>
...

드래그 앤 드롭 이벤트 처리하기

다음으로, JavaScript를 사용하여 드래그 앤 드롭 이벤트를 처리해야 합니다. 이를 위해 mousedown, mousemove, mouseup 이벤트를 활용하겠습니다. 먼저, 드래그 시작을 감지하는 mousedown 이벤트를 등록합니다.

document.addEventListener("mousedown", function(event) {
  // 마우스 버튼이 왼쪽 버튼인 경우에만 동작
  if (event.button === 0) {
    // 드래그 시작 처리
    // ...
  }
});

이어서, 이동 중인 마우스의 위치에 따라 요소를 움직이는 mousemove 이벤트를 등록합니다.

document.addEventListener("mousemove", function(event) {
  // 드래그 중일 경우에만 동작
  if (isDragging) {
    // 드래그 중인 요소의 위치를 마우스 위치로 변경
    // ...
  }
});

마지막으로, 드래그 종료를 감지하는 mouseup 이벤트를 등록합니다.

document.addEventListener("mouseup", function(event) {
  // 드래그 중이었던 요소의 위치를 업데이트
  // ...
});

드래그 앤 드롭 기능 구현하기

위에서 설정한 HTML 구조와 드래그 앤 드롭 이벤트 처리를 바탕으로 실제 드래그 앤 드롭 기능을 구현합니다. 먼저, 드래그 시작을 감지하는 함수를 작성합니다.

function handleDragStart(event) {
  // 드래그 시작된 요소의 식별자를 저장
  event.dataTransfer.setData("text/plain", event.target.id);
}

이어서, 이동 중인 마우스의 위치에 따라 요소를 움직이는 함수를 작성합니다.

function handleDrag(event) {
  // 드래그 시작된 요소를 찾아 위치 업데이트
  const offsetX = event.clientX - event.target.clientWidth / 2;
  const offsetY = event.clientY - event.target.clientHeight / 2;
  event.target.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
}

마지막으로, 드래그 종료를 감지하는 함수를 작성합니다.

function handleDragEnd(event) {
  // 드래그 종료된 요소의 위치를 업데이트
  const droppableElement = event.target;
  const offsetX = event.clientX - droppableElement.clientWidth / 2;
  const offsetY = event.clientY - droppableElement.clientHeight / 2;
  droppableElement.style.transform = `translate(${offsetX}px, ${offsetY}px)`;

  // 드롭된 위치 파악 및 처리
  // ...
}

위에서 작성한 함수들을 이용하여 드래그 앤 드롭 기능을 구현할 수 있습니다. 이후에는 필요에 따라 드롭된 위치를 파악하여 레이아웃을 조정하거나 다른 동작을 수행할 수 있습니다.

마무리

드래그 앤 드롭 기능을 사용하여 웹사이트에서 레이아웃 조정 기능을 추가하는 방법을 알아보았습니다. JavaScript의 이벤트 처리를 통해 드래그 앤 드롭을 구현하고, 드롭된 위치를 파악하여 원하는 동작을 수행할 수 있습니다. 이를 활용하여 사용자가 웹사이트의 레이아웃을 자유롭게 조정할 수 있는 기능을 추가해보세요.

References: