HTML5에서 드래그 앤 드롭

이 게시물에서는 HTML5의 기본 드래그 앤 드롭 인터페이스를 사용하여 브라우저에서 드래그 앤 드롭 기능을 구현하는 방법을 살펴보겠습니다.

아이디어는 간단합니다.

• 드래그할 수 있도록 요소를 맞춤설정하세요
• 드래그 가능한 요소를 드롭 가능한 영역에 드롭하는 것을 허용합니다.

두 개의 상자를 선언합니다.

<div classname="flex gap-8">
  <div id="box1" classname="w-[300px] h-[300px] border border-black flex items-center justify-center"></div>
  <div id="box2" classname="w-[300px] h-[300px] border border-black flex items-center justify-center"></div>
</div>

이 두 상자는 "드롭 존" 역할을 합니다. 사용자는 한 상자에서 항목을 끌어서 다른 상자에 놓을 수 있습니다.

"box1" 안에 드래그 가능하게 만들고 싶은 div를 추가하세요.

  <div id="box1" classname="w-[300px] h-[300px] border border-black flex items-center justify-center"></div>
    <div id="draggable1" classname="w-[50px] h-[50px] bg-red-500 cursor-move"></div>
  

이 빨간색 사각형이 상자 사이로 드래그할 수 있는 아이템이 됩니다.

요소를 드래그 가능하게 만들기

요소를 드래그 가능하게 만들려면 요소에 draggable 속성을 추가하고 dragstart 이벤트를 처리해야 합니다.
dragstart 이벤트는 사용자가 항목 드래그를 시작할 때 트리거됩니다. 이를 구현하는 방법은 다음과 같습니다.

const handleOnDragStart = (event) => {
  event.dataTransfer.setData("text/plain", event.target.id);
};

이 함수에서는 event.dataTransfer.setData()를 사용하여 드래그된 요소의 ID를 저장합니다. 이 ID는 나중에 어떤 요소를 끌어서 놓아야 하는지 식별하는 데 도움이 됩니다.

다음으로 draggable1 div를 업데이트하여 드래그 가능하게 만들고 onDragStart 이벤트 핸들러를 추가합니다.

<div id="draggable1" classname="w-[50px] h-[50px] bg-red-500 cursor-move" draggable="true" ondragstart="{handleOnDragStart}"></div>

요소 삭제

const handleOnDrop = (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  event.target.appendChild(document.getElementById(data));
};

const handleDragOver = (event) => {
  event.preventDefault();
};

• handleOnDrop 함수는 기본 동작(드롭 허용에 중요)을 방지하고 event.dataTransfer에서 드래그된 요소의 ID를 검색하고 드래그된 요소를 드롭 대상에 추가합니다.
• handleDragOver 함수는 기본 동작을 방지하여 드래그된 요소를 삭제할 수 있도록 합니다.

마지막으로 다음 이벤트 핸들러를 상자에 적용합니다.

<div id="box1" ondrop="{handleOnDrop}" ondragover="{handleDragOver}" classname="w-[300px] h-[300px] border border-black flex items-center justify-center">
  <div id="draggable1" classname="w-[50px] h-[50px] bg-red-500 cursor-move" draggable="true" ondragstart="{handleOnDragStart}"></div>
</div>

<div id="box2" ondrop="{handleOnDrop}" ondragover="{handleDragOver}" classname="w-[300px] h-[300px] border border-black flex items-center justify-center"></div>

드래그 작업이 진행 중일 때 강조할 시각적 신호를 추가할 수 있습니다. 구성요소의 불투명도를 줄여보겠습니다.
이는 상태 변수에서 드래그 작업이 수행되는 시점을 추적하고 불투명도를 변경하여 수행할 수 있습니다.
반응 구성요소는 다음과 같습니다

<p>import { useState } from "react";</p>

<p>const SimpleDragDrop = () => {<br>
  const [isDragging, setIsDragging] = useState(false);</p>

<p>const handleOnDragStart = (event) => {<br>
    setIsDragging(true);<br>
    event.dataTransfer.setData("text/plain", event.target.id);<br>
  };</p>

<p>const handleOnDrop = (event) => {<br>
    event.preventDefault();<br>
    setIsDragging(false);<br>
    const data = event.dataTransfer.getData("text/plain");<br>
    event.target.appendChild(document.getElementById(data));<br>
  };</p>

<p>const handleDragOver = (event) => {<br>
    event.preventDefault();<br>
  };</p>

<p>return (<br>
    </p><div classname="flex gap-8">
<br>
      <div>
        id="box1"<br>
        onDrop={handleOnDrop}<br>
        onDragOver={handleDragOver}<br>
        className="flex h-[300px] w-[300px] items-center justify-center border border-main"<br>
      ><br>
        <div>
          id="draggable1"<br>
          className={h-[50px] w-[50px] cursor-move bg-red-500 <span class="p">${</span><span class="nx">isDragging</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">opacity-50</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">opacity-100</span><span class="dl">"</span><span class="p">}</span><span class="s2">}<br>
          draggable={true}<br>
          onDragStart={handleOnDragStart}<br>
        /><br>
      </span>
</div>
<br>
      <div>
        id="box2"<br>
        onDrop={handleOnDrop}<br>
        onDragOver={handleDragOver}<br>
        className="flex h-[300px] w-[300px] items-center justify-center border border-main"<br>
      /><br>
    </div>
<br>
  );<br>
};

<p>export default SimpleDragDrop;</p>


<h2>
<br>
  <br>
  <br>
  데모<br>
</h2>

<p>라이브 데모</p>

<p>이 예는 단 몇 줄의 코드만으로 드래그 앤 드롭 기능을 구현하는 것이 얼마나 쉬운지 보여줍니다. 더 많은 드래그 앤 드롭 대상을 추가하거나 요소의 모양과 동작을 추가로 사용자 정의하여 자유롭게 확장하세요!</p>

<h3>
  
  
  더 읽어보세요
</h3>

<ul>
<li>HTML 드래그 앤 드롭 API</li>
<li>HTML5 드래그 앤 드롭 API</li>
</ul>

<p>원본글</p>


          </div>

            
        </div>

위 내용은 HTML5에서 드래그 앤 드롭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!