HTML5 中的拖放

在這篇文章中，我們將了解如何使用 HTML5 中的原生拖放介面在瀏覽器中實作拖放功能。

想法很簡單：

• 自訂元素使其可拖曳
• 允許將可拖曳元素放置在可放置區域中。

聲明兩個盒子

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

這兩個盒子將作為我們的「放置區」。用戶將能夠將一個項目從一個框中拖放到另一個框中。

新增一個我們想要在「box1」內可拖曳的div

  <div
    id="box1"
    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"
    />
  </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}"
/>

刪除元素

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
  id="box2"
  onDrop="{handleOnDrop}"
  onDragOver="{handleDragOver}"
  className="w-[300px] h-[300px] border border-black flex items-center justify-center"
/>

您可以新增視覺提示以在拖曳操作正在進行時突出顯示。我們將降低組件的不透明度。
這可以透過追蹤何時在狀態變數中執行拖曳操作並更改不透明度來完成。
這就是你的 React 元件的樣子

<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>
    <div className="flex gap-8"><br>
      <div<br>
        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<br>
          id="draggable1"<br>
          className={h-[50px] w-[50px] cursor-move bg-red-500 </span><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>
      </div><br>
      <div<br>
        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>

<p>export default SimpleDragDrop;</p>

示範

現場示範

此範例示範了只需幾行程式碼即可輕鬆實現拖放功能。您可以透過添加更多拖放目標或進一步自訂元素的外觀和行為來擴展此功能！

閱讀更多

• HTML 拖放 API
• HTML5 拖放 API

原帖

以上是HTML5 中的拖放的詳細內容。更多資訊請關注PHP中文網其他相關文章！