HTML5 fournit une prise en charge native de la fonctionnalité glisser-déposer, ce qui facilite la création d'interfaces interactives et conviviales. Voici quelques façons d’utiliser le glisser-déposer en HTML5 :

1. Glisser-déposer de base :

    HTML
    <div id="draggable" draggable="true" ondragstart="drag(event)">Drag me</div>
   <div id="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>
   
   <script>
     function allowDrop(event) {
       event.preventDefault();
     }
   
     function drag(event) {
       event.dataTransfer.setData("text", event.target.id);
     }
   
     function drop(event) {
       event.preventDefault();
       var data = event.dataTransfer.getData("text");
       var draggedElement = document.getElementById(data);
       event.target.appendChild(draggedElement);
     }
   </script>
   

   Dans cet exemple, l'attribut draggable est défini sur « true » pour un élément et trois écouteurs d'événements ( ondragstart , ondragover et ondrop ) sont utilisés pour activer la fonctionnalité glisser-déposer de base.

2. Glisser des fichiers :

    HTML
    <div id="file-drop" ondrop="dropFile(event)" ondragover="allowDrop(event)">Drop files here</div>
   
   <script>
     function allowDrop(event) {
       event.preventDefault();
     }
   
     function dropFile(event) {
       event.preventDefault();
       var files = event.dataTransfer.files;
   
       for (var i = 0; i < files.length; i++) {
         // Handle dropped files (e.g., upload or display)
         console.log("Dropped file:", files[i].name);
       }
     }
   </script>
   

   Cet exemple permet aux utilisateurs de glisser-déposer des fichiers sur une zone spécifiée, et la fonction dropFile gère les fichiers déposés.

3. Liste triable :

   Vous pouvez créer une liste triable par glisser-déposer. Il existe également des bibliothèques tierces comme jQuery UI ou des API HTML5 natives.

    HTML
    <ul id="sortable-list" ondrop="drop(event)" ondragover="allowDrop(event)">
     <li draggable="true" ondragstart="drag(event)">Item 1</li>
     <li draggable="true" ondragstart="drag(event)">Item 2</li>
     <li draggable="true" ondragstart="drag(event)">Item 3</li>
   </ul>
   
   <script>
     function allowDrop(event) {
       event.preventDefault();
     }
   
     function drag(event) {
       event.dataTransfer.setData("text", event.target.innerHTML);
     }
   
     function drop(event) {
       event.preventDefault();
       var data = event.dataTransfer.getData("text");
       var newElement = document.createElement("li");
       newElement.innerHTML = data;
       event.target.appendChild(newElement);
     }
   </script>
   

   Cet exemple crée une simple liste triable dans laquelle les éléments de la liste peuvent être glissés et déposés pour réorganiser l'ordre.

Ces exemples couvrent certains cas d'utilisation courants, mais l'API glisser-déposer en HTML5 est polyvalente et peut être adaptée à diverses applications. Gardez à l'esprit que la compatibilité des navigateurs peut varier, c'est donc une bonne pratique de vérifier la compatibilité et de fournir des solutions de secours si nécessaire.