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

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

準(zhǔn)備：ドラッグ可能な要素を設(shè)定します

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

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

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

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

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

 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（）; //ドロップをトリガーするためにデフォルトの動(dòng)作をブロックする必要があります
}）;

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

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

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

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

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

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

ローカル畫(huà)像をページにドラッグするなど、ファイルアップロードシナリオの場(chǎng)合、 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）;
    }
  }
}）;

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

メモとFAQ

HTML5ドラッグアンドドロップAPIを使用すると、いくつかの詳細(xì)が見(jiàn)過(guò)ごされがちです。

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

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