Glisser-déposer en HTML5-js tutoriel-php.cn

Glisser-déposer en HTML5

Mary-Kate Olsen

Libérer： 2024-10-06 06:18:02

original

440 Les gens l'ont consulté

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.

Drag and Drop in HTML5

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>

Copier après la connexion

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>

Copier après la connexion

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);
};

Copier après la connexion

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

Copier après la connexion

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();
};

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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 !