HTML5ドラッグアンドドロップAPIを使用して、ドラッグアンドドロップ機能を追加します。

Webページにドラッグアンドドロップ機能を追加する方法は、HTML5のドラッグアンドドロップAPIを使用することです。これは、追加のライブラリなしでネイティブにサポートされています。特定の手順は次のとおりです。1。ドラッグを有効にするために要素draggable = "true"を設定します。 2。ドラッグスタート、ドラッグオーバー、ドロップ、ドラッグイベントを聞いてください。 3. Dragstartでデータを設定し、Dragoverのデフォルト動作をブロックし、ドロップのロジックを処理します。さらに、appendChildを通じて要素の動きを実現でき、ファイルアップロードはe.datatransfer.filesを使用して達成できます。注：ドロップをトリガーするには、Default（）を呼び出す必要があります。モバイル側のサポートは不十分です。複雑なソートにサードパーティライブラリを使用することをお勧めします。

実際には、Webページにドラッグアンドドロップ機能を追加することは難しくありません。HTML5のドラッグアンドドロップAPIを使用して実現できます。ネイティブにサポートされており、追加のライブラリの導入を必要としません。ファイルのアップロードや要素ソートなどのインタラクションに適しています。

準備：ドラッグ可能な要素を設定します

要素をドラッグするには、最初にdraggable="true"属性を追加します。たとえば、a <div>または画像をデフォルトでドラッグすることはできませんが、このプロパティを追加した後にドラッグイベントをトリガーできます。 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="HTML5ドラッグアンドドロップAPIを使用して、ドラッグアンドドロップ機能を追加します。"><pre class='brush:php;toolbar:false;'> &lt;div draggable = &quot;true&quot;&gt;私をドラッグして試してみてください&lt;/div&gt;</pre><p>次に、いくつかの重要なイベントを聞く必要があります： <code>dragstart 、 dragover 、 drop 、 dragend 。これらのイベントは、スタートをドラッグし、ターゲット領域にドラッグし、マウスを解放し、端をドラッグするアクションに対応します。

ドラッグとドロップの基本的なプロセス

ドラッグアンドドロップ操作は、主に3つのステップに分割されます。

• ドラッグの開始： dragstartイベントでドラッグデータとエフェクトを設定します。
• ターゲットエリアにドラッグします： dragoverのデフォルト動作をブロックすると、それ以外の場合はdropをトリガーできません。
• 無料配置： dropおよび完全なロジックのプロセスデータ。

たとえば、ボックスを別の領域にドラッグします。

 const dragel = document.queryselector（ '＃drag'）;
const dropzone = document.queryselector（ '＃drop-zone'）;

dragel.addeventlistener（ 'dragstart'、（e）=> {
  e.datatransfer.setdata（ 'text/plain'、 'これはデータのドラッグ'）;
}）;

dropzone.addeventlistener（ 'dragover'、（e）=> {
  E.PreventDefault（）; //ドロップをトリガーするためにデフォルトの動作をブロックする必要があります
}）;

dropzone.addeventlistener（ 'drop'、（e）=> {
  const data = e.datatransfer.getData（ 'text/plain'）;
  console.log（ '受信データ：'、data）;
}）;

これにより、最も基本的なドラッグアンドドロップインタラクションが完了します。

高度なドラッグアンドドロップ：要素またはファイルアップロードを移動します

テキストデータの渡しに加えて、ドラッグアンドドロップを使用してDOM要素を移動したり、ファイルをアップロードしたりすることもできます。

たとえば、要素をあるコンテナから別のコンテナにドラッグする場合は、 drop時に新しい場所にノードを追加できます。

 dropzone.addeventlistener（ 'drop'、（e）=> {
  const id = e.datatransfer.getData（ 'text/plain'）;
  const draggedel = document.getElementById（ID）;
  dropzone.appendchild（draggedel）;
}）;

ローカル画像をページにドラッグするなど、ファイルアップロードシナリオの場合、 e.dataTransfer.filesを介してファイルリストを取得できます。

 dropzone.addeventlistener（ 'drop'、（e）=> {
  const files = e.datatransfer.files;
  for（ファイルのファイルをlet）{
    if（file.type.startswith（ 'image/'））{
      const reader = new fileReader（）;
      reader.onload =（）=> {
        const img = document.createelement（ 'img'）;
        img.src = reader.result;
        dropzone.appendChild（IMG）;
      };
      reader.readasdataurl（file）;
    }
  }
}）;

コードのこの部分は、画像をドラッグした後に直接プレビューできます。

メモとFAQ

HTML5ドラッグアンドドロップAPIを使用すると、いくつかの詳細が見過ごされがちです。

• dragover preventDefault()を呼び出す必要があり、それ以外の場合はdropがトリガーされません
• 異なるブラウザは、ドラッグやカーソルなどのドラッグアンドドロップスタイルに対して異なるサポートを提供する場合があります。
• ネイティブのドラッグアンドドロップのモバイルサポートはあまり良くなく、追加のタッチイベントが必要です
• 複雑なドラッグアンドドロップソートを実行したい場合は、サードパーティライブラリ（sortablejsなど）を組み合わせることを検討できます。

基本的にそれだけです。 HTML5のドラッグアンドドロップ関数は簡単ですが、使用後に良好な相互作用効果を生成する可能性もあります。