[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 효과를 사용한 폴더 트리 구현 방법

29 Nov 2023

javascript

폴더 트리는 대부분의 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 사용자는 파일 또는 폴더를 드래그하여 이동하거나 복사할 수 있어야 합니다.

이번 포스트에서는 자바스크립트와 GreenSock 라이브러리를 사용하여 폴더 트리에 드래그 앤 드롭 효과를 구현하는 방법을 알아보겠습니다. GreenSock(TweenMax)은 UI 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

1. HTML 구조 설정하기

먼저, 폴더 트리를 나타내기 위한 HTML 구조를 설정해야 합니다. 이 예제에서는 <ul>과 <li> 요소를 사용하여 폴더 및 파일을 나타냅니다. 각각의 <li> 요소에는 드래그 앤 드롭 이벤트를 추가할 것입니다.

<ul class="folder-tree">
  <li class="folder">Folder 1
    <ul>
      <li class="file">File 1</li>
      <li class="file">File 2</li>
    </ul>
  </li>
  <li class="folder">Folder 2
    <ul>
      <li class="file">File 3</li>
      <li class="file">File 4</li>
    </ul>
  </li>
</ul>

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

다음으로는 자바스크립트를 사용하여 드래그 앤 드롭 이벤트를 처리해야 합니다. 이 예제에서는 mousedown, mousemove, mouseup 이벤트를 사용합니다. mousedown 이벤트가 발생하면 드래그 시작을 표시하고, mousemove 이벤트가 발생하면 드래그되는 요소를 이동시킵니다. mouseup 이벤트가 발생하면 드래그가 끝났음을 표시합니다.

document.addEventListener("DOMContentLoaded", function() {
  var dragItem = null;
  var container = document.querySelector(".folder-tree");

  function handleDragStart(e) {
    dragItem = this;
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.dataTransfer.dropEffect = "move";
    return false;
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    if (dragItem !== this) {
      dragItem.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData("text/html");
    }
    return false;
  }

  function handleDragEnd(e) {
    dragItem = null;
  }

  container.addEventListener("dragstart", handleDragStart, false);
  container.addEventListener("dragover", handleDragOver, false);
  container.addEventListener("drop", handleDrop, false);
  container.addEventListener("dragend", handleDragEnd, false);
});

3. 애니메이션 추가하기

이제 GreenSock(TweenMax)을 사용하여 드래그 앤 드롭 애니메이션 효과를 추가합니다. handleDragStart 함수에서 드래그 시작을 표시하는 대신 GreenSock의 TweenMax.to() 메서드를 사용하여 애니메이션 효과를 줄 것입니다.

function handleDragStart(e) {
  dragItem = this;
  e.dataTransfer.effectAllowed = "move";
  e.dataTransfer.setData("text/html", this.innerHTML);
  
  // GreenSock 애니메이션 효과 적용
  TweenMax.to(this, 0.3, { opacity: 0.5 });
}

handleDragEnd 함수에서는 드래그가 끝났을 때 다시 원래 상태로 돌아오도록 애니메이션을 설정합니다.

function handleDragEnd(e) {
  dragItem = null;
  // GreenSock 애니메이션 효과 적용
  TweenMax.to(this, 0.3, { opacity: 1 });
}

마무리

이제 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 사용한 폴더 트리를 구현하는 방법을 알아보았습니다. 이 예제에서는 HTML 구조를 설정하고, 드래그 앤 드롭 이벤트를 처리하고, GreenSock을 사용하여 애니메이션을 추가하는 방법을 다루었습니다.

자세한 내용은 다음 링크를 참조하시기 바랍니다.

감사합니다!