Glisser-déposer en HTML5

Dans cet article, nous verrons comment implémenter la fonctionnalité glisser-déposer dans les navigateurs à l'aide de l'interface glisser-déposer native en HTML5.

L'idée est simple :

• Personnaliser un élément pour le rendre déplaçable
• Autoriser le dépôt de l'élément déplaçable dans la zone de dépôt.

Déclarez deux cases

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

Ces deux boîtes nous serviront de « zones de dépôt ». L'utilisateur pourra faire glisser un élément d'une case et le déposer dans l'autre.

Ajoutez un div que nous voulons rendre déplaçable dans "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>

Ce carré rouge sera l'élément qui pourra être glissé entre les cases.

Rendre l'élément déplaçable

Pour rendre un élément déplaçable, nous devons lui ajouter l'attribut draggable et gérer l'événement dragstart.
L'événement dragstart se déclenchera lorsque l'utilisateur commencera à faire glisser l'élément. Voici comment nous pouvons le mettre en œuvre :

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

Dans cette fonction, nous utilisons event.dataTransfer.setData() pour stocker l'ID de l'élément déplacé. Cet identifiant nous aidera plus tard à identifier quel élément a été glissé et où il doit être déposé.

Ensuite, mettez à jour le div draggable1 pour le rendre déplaçable et ajoutez le gestionnaire d'événements onDragStart :

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

Supprimer l'élément

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

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

• La fonction handleOnDrop empêche le comportement par défaut (ce qui est important pour autoriser le dépôt), récupère l'ID de l'élément déplacé à partir de event.dataTransfer et ajoute l'élément déplacé à la cible du dépôt.
• La fonction handleDragOver garantit que l'élément glissé peut être déposé en empêchant le comportement par défaut.

Enfin, appliquez ces gestionnaires d'événements aux cases :

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

Vous pouvez ajouter des repères visuels pour mettre en évidence lorsque l'opération de glissement est en cours. Nous allons réduire l'opacité du composant.
Cela peut être fait en suivant le moment où l'opération de glissement est effectuée dans une variable d'état et en modifiant l'opacité.
Voici à quoi devrait ressembler votre composant de réaction

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

Démo

Démo en direct

Cet exemple montre à quel point il est facile d'implémenter la fonctionnalité glisser-déposer avec seulement quelques lignes de code. N'hésitez pas à développer cela en ajoutant d'autres cibles par glisser-déposer ou en personnalisant davantage l'apparence et le comportement des éléments !

En savoir plus

• API Glisser-Déposer HTML
• L'API Glisser-Déposer HTML5

Message original

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!