HTML5 provides native support for drag and drop functionality, making it easier to create interactive and user-friendly interfaces. Here are some ways to use drag and drop in HTML5:

1. Basic Drag and Drop:

   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>
   

   In this example, the draggable attribute is set to "true" for an element, and three event listeners (ondragstart, ondragover, and ondrop) are used to enable basic drag-and-drop functionality.

2. Dragging Files:

   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>
   

   This example allows users to drag and drop files onto a specified area, and the dropFile function handles the dropped files.

3. Sortable List:

   You can create a sortable list using drag and drop. There are also third-party libraries like jQuery UI or native HTML5 APIs.

   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>
   

   This example creates a simple sortable list where list items can be dragged and dropped to rearrange the order.

These examples cover some common use cases, but the drag and drop API in HTML5 is versatile and can be adapted for various applications. Keep in mind that browser compatibility may vary, so it's a good practice to check compatibility and provide fallbacks if needed.