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」に設定されており、3 つのイベント リスナー ( 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 は多用途であり、さまざまなアプリケーションに適応できます。ブラウザの互換性は異なる場合があることに注意してください。そのため、互換性を確認し、必要に応じてフォールバックを提供することをお勧めします。