HTML5-ドラッグアンドドロップ
ドラッグアンドドロップ（DnD）は、コピー、並べ替え、削除を簡単にする強力なユーザーインターフェイスの概念です。マウスクリックの助けを借りてアイテムの。これにより、ユーザーはマウスボタンをクリックして要素の上に押したまま、別の場所にドラッグし、マウスボタンを離して要素をそこにドロップできます。
従来のHTML4でドラッグアンドドロップ機能を実現するには、開発者は、複雑なJavaScriptプログラミングまたはjQueryなどの他のJavaScriptフレームワークを使用する必要があります。
HTML 5は、ブラウザの作成にネイティブDnDサポートをもたらすドラッグアンドドロップ（DnD）APIを考案しました。コーディングがはるかに簡単です。
HTML 5 DnDは、Chrome、Firefox 3.5、Safari4などのすべての主要なブラウザでサポートされています。
ドラッグアンドドロップイベント
ドラッグアンドドロップ操作のさまざまな段階で発生するイベントがいくつかあります。これらのイベントは以下のとおりです-
| Sr.No。 | イベント&説明 |
|---|---|
| 1 |
ドラッグスタート ユーザーがオブジェクトのドラッグを開始すると発生します。 |
| 2 |
dragenter ドラッグが発生しているときに、マウスが最初にターゲット要素上に移動したときに発生します。このイベントのリスナーは、この場所でのドロップが許可されているかどうかを示す必要があります。リスナーがない場合、またはリスナーが操作を実行しない場合、デフォルトではドロップは許可されません。 |
| 3 |
ドラッグオーバー このイベントは、ドラッグが発生しているときにマウスが要素上に移動すると発生します。多くの場合、リスナー中に発生する操作は、dragenterイベントと同じです。 |
| 4 |
ドラッグリーブ このイベントは、ドラッグが発生しているときにマウスが要素を離れたときに発生します。リスナーは、ドロップフィードバックに使用されるハイライトマーカーまたは挿入マーカーをすべて削除する必要があります。 |
| 5 |
ドラッグ オブジェクトのドラッグ中にマウスを動かすたびに発生します。 |
| 6 |
drop dropイベントは、ドラッグ操作の最後にドロップが発生した要素で発生します。リスナーは、ドラッグされているデータを取得して、ドロップ位置に挿入する責任があります。 |
| 7 |
ドラッグ ユーザーがオブジェクトをドラッグしているときにマウスボタンを離すと発生します。 |
注-ドラッグイベントのみが発生することに注意してください。 mousemoveなどのマウスイベントは、ドラッグ操作中には発生しません。
DataTransferオブジェクト
すべてのドラッグアンドドロップイベントのイベントリスナーメソッドは、読み取り専用属性を持つEventオブジェクトを受け入れます。 dataTransfer。
event.dataTransferは、イベントに関連付けられたDataTransferオブジェクトを次のように返します-
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
DataTransferオブジェクトは、ドラッグに関するデータを保持しますとドロップ操作。このデータは、以下で説明するように、DataTransferオブジェクトに関連付けられたさまざまな属性に関して取得および設定できます-
| Sr.No。 | DataTransfer属性とその説明 |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types dragstartイベントで設定された形式をリストしたDOMStringListを返します。さらに、ファイルがドラッグされている場合、タイプの1つは文字列「ファイル」になります。 |
| 4 |
dataTransfer.clearData（） 指定された形式のデータを削除します。引数が省略されている場合は、すべてのデータを削除します。 |
| 5 |
dataTransfer.setData （形式、データ） 指定されたデータを追加します。 |
| 6 |
data = dataTransfer。getData（format） 指定されたデータを返します。そのようなデータがない場合は、空の文字列を返します。 |
| 7 |
dataTransfer.files ドラッグされているファイルがある場合は、そのファイルリストを返します。 |
| 8 |
dataTransfer.setDragImage（element、x、y） 指定された要素を使用してドラッグフィードバックを更新し、以前に指定されたフィードバックを置き換えます。 |
| 9 |
dataTransfer.addElement（element） 指定された要素をに追加しますドラッグフィードバックのレンダリングに使用される要素のリスト。 |
ドラッグアンドドロッププロセス
以下はドラッグアンドドロップ操作を実装するために実行する手順-
手順1-オブジェクトをドラッグ可能にする
実行する手順は次のとおりです-
-
要素をドラッグする場合は、その要素のドラッグ可能な属性をtrueに設定する必要があります。
-
ドラッグスタートのイベントリスナーを設定します。ドラッグされているデータを引き裂きます。
-
イベントリスナーのドラッグスタートは、許可される効果（コピー、移動、リンク、またはいくつかの組み合わせ）を設定します。
以下は、オブジェクトをドラッグ可能にする例です-
これにより、次の結果が生成されます-
ステップ2-オブジェクトのドロップ
ドロップを受け入れるには、ドロップターゲットが少なくとも3つのイベントをリッスンする必要があります。
-
ドロップターゲットがドロップを受け入れるかどうかを決定するために使用されるdragenterイベント。 。ドロップを受け入れる場合は、このイベントをキャンセルする必要があります。
-
ドラッグオーバーイベント。これは、ユーザーに表示するフィードバックを決定するために使用されます。イベントがキャンセルされると、dropEffect属性の値に基づいてフィードバック（通常はカーソル）が更新されます。
-
最後に、実際のドロップを許可するdropイベント
以下は、オブジェクトを別のオブジェクトにドロップする例です-
これにより、次の結果が生成されます-