HTML 드래그 앤 드롭 API

드래그 앤 드롭 API를 사용하면 자체 이름에서 알 수 있듯이 사용자가 상호 작용할 수 있는 드래그 앤 드롭 인터페이스를 생성할 수 있습니다.

이 API는 사용자가 클릭으로 허용한 요소를 선택하고 사용자가 허용하는 놓기 가능한 인터페이스로 끌어다 놓을 수 있도록 합니다. 이것은 모두 사용자 정의할 수 있으므로 어떤 요소를 끌어서 놓을 수 있는지 나타낼 수 있습니다. 몇 가지 기본 기능을 가진 몇 가지 간단한 기능만큼 쉽게.

텍스트를 드래그 앤 드롭하는 간단한 방법을 단계별로 설명하겠습니다.

먼저 드래그할 수 있는 항목을 식별해야 합니다. 이것은 draggable 속성과 ondragstart 핸들러를 추가하여 수행할 수 있습니다.

<script>
  function dragstart_handler(el) {
    el.dataTransfer.setData("text/plain", el.target.id);
  }

  window.addEventListener('DOMContentLoaded', () => {
    // Reference to the element we will drag
    const element = document.getElementById("draggable");
    // Add the handler to the div to make it draggable
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>

<div id="draggable" draggable="true">You can drag this element.</div>

그런 다음 드래그 가능한 개체를 끌어서 놓기 가능한 영역에 놓을 때 무엇을 하는지 정의해야 합니다. 이 작업은 dropEffect가 있는 함수를 만들어 수행되며 세 가지 dropEffect가 있습니다.

드래그한 개체를 놓기 가능한 영역에 복사합니다.

드래그한 개체를 이동하면 놓기 가능한 영역으로 이동합니다.

링크는 소스와 드롭 위치 사이에 어떤 형태의 관계 또는 연결이 생성될 것임을 나타냅니다.

내 예에서는 다음과 같이 move dropEffect를 사용합니다.

function dragover_handler(el) {
  el.preventDefault();
  el.dataTransfer.dropEffect = "move";
}

마지막 단계에서 놓기 가능한 영역과 이에 연결된 기능을 정의해야 합니다. 이 예에서는 끌기 가능한 개체를 놓기 가능한 영역으로 이동합니다.

<script>
function drop_handler(el) {
 el.preventDefault();
 const data = ev.dataTransfer.getData("text/plain");
 el.target.appendChild(document.getElementById(data));
}
</script>

<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>

모든 단계를 결합하면 this codePen 테스트 및 완료 방법을 확인하기 위해 만든 코드와 같은 코드로 끝납니다. 테스트하려면 텍스트를 드래그해야 합니다. 이 요소를 드래그할 수 있습니다. 이동하려면 텍스트 드롭 영역으로 이동합니다.

마치기 위해 이것이 이 API를 사용하는 방법에 대한 작은 예라고 덧붙이겠습니다. 예를 들어 이미지를 드래그하여 텍스트뿐만 아니라 놓기 가능한 영역에 놓을 수도 있습니다.