TL; DR –HTML5ドラッグアンドドロップAPIを使用するとカーソルでHTMLオブジェクトを取得し、別の場所にドラッグします。
HTML5でドラッグアンドドロップできるものは何ですか？
HTML5を使用すると、任意の要素をドラッグ可能にして、カーソルで要素を拾い上げ、ドロップ可能な要素として定義されている別の場所にドラッグできます。以下の例では、画像を正方形にドラッグしてみてください。
この機能により、ユーザーエクスペリエンスが簡素化され、簡単なオンラインゲームを作成することもできます（たとえば、仮想チェスの駒をドラッグアンドドロップできます）。要素をドラッグすると、マウスボタンを離してドロップするまで、その透明なレプリカがカーソルとともに移動します。
技術的には、ドラッグアンドドロップはHTML5に追加されたJavaScriptAPIです。したがって、この機能を使用するには、少なくとも基本的なスクリプトの知識が必要です。
HTML5ドラッグアンドドロップのイベント
次の表に、次のように表示されます。ドラッグアンドドロップ機能に関連するすべてのイベント：
| イベント | 説明 |
|---|---|
| ドラッグ | 要素をドラッグしながらカーソルが移動します |
| ドロップ | ドラッグプロセスが終了します |
| dragstart | カーソルが要素を選択してドラッグを開始します |
| ドラッグスタート | マウスボタンを離して、要素をドロップします |
| dragenter | カーソルがターゲット要素に入ります |
| ドラッグリーブ | カーソルがターゲット要素を離れる |
| ドラッグオーバー | カーソルがターゲット要素上を移動する |
ドラッグアンドドロップのステップバイステップの説明
HTML5のドラッグアンドドロップコーディングは、JSでのスクリプトが含まれているため、一見すると非常に複雑に見えます。ただし、理解しやすくするために、プロセスの各部分を調べてみましょう。
ドラッグ可能な要素
まず、ドラッグする要素に次の要素が含まれていることを確認する必要があります。 HTML5 draggable属性が適用され、その値がtrueに設定されています：
ドラッグ
次に、オブジェクトをドラッグした後に何が起こるかを定義します。これを行うには、 dragstartイベントのイベントハンドラーであり、実行する関数を定義します。
ドラッグされたデータの値とデータタイプは、
メソッド：
ドロップ
HTML5ドラッグ可能データは、イベントハンドラーをdragoverイベントにアタッチすることで指定されます。
要素とデータを指定することはできません。デフォルトで他の要素にドロップされます。これは、要素を停止する必要があることを意味します。 event.preventDefault()メソッドを使用したデフォルトの動作：
dropイベントは、HTML5のドラッグ可能なデータがドロップされたときに発生します。 ondropイベントハンドラーによって呼び出されます。
最終コード：例
基本的に、次のことができるようにコードが必要です。次の4つの手順を実行します。
-
preventDefault() - データを取得して、データに関連するWebブラウザのデフォルトのアクションを防止します。
dataTransfer.getData()メソッドを使用 - ドラッグされた要素をドロップ要素に貼り付けます
それがどのように機能するかを見てみましょう。以下の例：
HTML5ドラッグアンドドロップ：便利なヒント
- ファイル、リンク、画像、テキストなど、さまざまな種類の要素をドラッグできます。
- 複数の要素を一度にドラッグすることもできます。ただし、一貫性を保つために、すべて同じ形式にすることをお勧めします。
- ユーザー入力を受け入れるフォーム要素は、デフォルトでドロップ可能な領域にすることができます。