HTML 드래그 앤 드롭 API

2301 단어 javascripthtmlwebdev
드래그 앤 드롭 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를 사용하는 방법에 대한 작은 예라고 덧붙이겠습니다. 예를 들어 이미지를 드래그하여 텍스트뿐만 아니라 놓기 가능한 영역에 놓을 수도 있습니다.

    좋은 웹페이지 즐겨찾기