HTML5 提供對拖放功能的本機支持，使創建互動式和用戶友好的介面變得更加容易。以下是在 HTML5 中使用拖放的一些方法：

1. 基本拖放：

    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>
   

   在此範例中，元素的draggable屬性設定為“true”，並使用三個事件偵聽器（ ondragstart 、 ondragover和ondrop ）來啟用基本的拖放功能。

2. 拖曳文件：

    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>
   

   此範例允許使用者將檔案拖曳到指定區域， dropFile函數處理拖放的檔案。

3. 可排序列表：

   您可以使用拖放建立可排序清單。還有第三方函式庫，例如 jQuery UI 或本機 HTML5 API。

    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>
   

   此範例建立一個簡單的可排序列表，可以在其中拖放列表項目以重新排列順序。

這些範例涵蓋了一些常見的用例，但 HTML5 中的拖放 API 是通用的，可以適應各種應用程式。請記住，瀏覽器相容性可能會有所不同，因此最好檢查相容性並在需要時提供後備方案。