Drag-and-Drop in HTML5-js-Tutorial-php.cn

Drag-and-Drop in HTML5

Mary-Kate Olsen

Freigeben： 2024-10-06 06:18:02

Original

439 Leute haben es durchsucht

In this post, we will see how to implement drag and drop functionality in browsers using the native drag and drop interface in HTML5.

The idea is simple:

Customize an element to make it draggable
Allow dropping the draggable element in the droppable area.

Drag and Drop in HTML5

Declare two boxes


<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>

Nach dem Login kopieren

These two boxes will serve as our "drop zones." The user will be able to drag an item from one box and drop it into the other.

Add a div that we want to make as draggable inside "box1"


  <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>

Nach dem Login kopieren

This red square will be the item that can be dragged between the boxes.

Making the Element Draggable

To make an element draggable, we need to add the draggable attribute to it and handle the dragstart event.
The dragstart event will trigger when the user starts dragging the item. Here’s how we can implement it:


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

Nach dem Login kopieren

In this function, we use event.dataTransfer.setData() to store the ID of the dragged element. This ID will later help us identify which element was dragged and where it needs to be dropped.

Next, update the draggable1 div to make it draggable and add the onDragStart event handler:


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

Nach dem Login kopieren

Dropping the Element


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

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

Nach dem Login kopieren

The handleOnDrop function prevents the default behavior (which is important for allowing the drop), retrieves the ID of the dragged element from event.dataTransfer, and appends the dragged element to the drop target.
The handleDragOver function ensures that the dragged element can be dropped by preventing the default behavior.

Finally, apply these event handlers to the boxes:


<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"
/>

Nach dem Login kopieren

You can add visual cues to highlight when the drag operation is in progress. We will reduce the opacity of the component.
This can be done by tracking when the drag operation is being performed in a state variable and changing the opacity.
This is how your react component should look like


<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>

Nach dem Login kopieren

Demo

Live Demo

This example demonstrates how easy it is to implement drag-and-drop functionality with just a few lines of code. Feel free to expand on this by adding more drag-and-drop targets or customizing the appearance and behavior of the elements further!

HTML Drag and Drop API
The HTML5 Drag and Drop API

Original Post

Das obige ist der detaillierte Inhalt vonDrag-and-Drop in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Drag-and-Drop in HTML5

Declare two boxes

Add a div that we want to make as draggable inside "box1"

Making the Element Draggable

Dropping the Element

Demo

Read more