HTML5 中的拖放-js教程-PHP中文网

HTML5 中的拖放

Mary-Kate Olsen

发布： 2024-10-06 06:18:02

原创

440 人浏览过

在这篇文章中，我们将了解如何使用 HTML5 中的原生拖放界面在浏览器中实现拖放功能。

想法很简单：

自定义元素使其可拖动
允许将可拖动元素放置在可放置区域中。

Drag and Drop in 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>

登录后复制