5.2. ドロップの場所ごとに、dragoverイベントハンドラ

でドロップエフェクトを定義します定義されるドロップエフェクトは、ソースの場所のdragstartイベントハンドラで決定される許可されるエフェクトのいずれかでなければなりません。,

ドロップエフェクトが許可されたドロップエフェクトのいずれかでない場合、それは許可されたドロップエフェクトのいずれかに設定されま

ドロップエフェクトを定義するdragoverハンドラは、ドラッグされた要素が可能なドロップ位置の上にドラッグされているときに実行されます。

次に、特定のドロップ位置のドロップ効果を定義する例を示します。

6)ドロップゾーン（ドロップ場所）を定義します

デフォルトでは、HTMLドキュメント内の要素はドロップを許可しません。, しかし、それは変更することができ、要素をドロップゾーンにするには、

• ondragoverイベントハンドラが必要です。 このイベントハンドラでは、ドロップ位置のドロップ効果は、ステップ5.2で前述したように定義されます。
• ondropイベントハンドラで、ドラッグ可能な要素がドラッグ場所/ゾーンにドロップされたときに実行されます。

次に、要素をドロップ位置として定義する例を示します。,

dragoverイベントハンドラとdropイベントハンドラの両方で、preventDefault()を呼び出して、ドロップを許可する必要があります。

条件が使用されている特定の状況でのみドロップが許可される場合、ドロップを許可する条件が満たされている場合にのみpreventDefaultを追加します。 この防止を要素とするドロップゾーンが条件を満たしていないが落ちないことがございます。,

dataTransferプロパティのドラッグデータのタイプに基づいてドロップを拒否するのは一般的なケースです。 次の例では、dragoverハンドラーを持つdrop zone要素にリンクのみをドロップできるようにすることを示しています。

7)要素のドロップを処理します

ドロップイベント中に、ドラッグデータを処理する必要があります。 これを行うには、dataTransferイベントプロパティのgetData()メソッドが使用されます。,

getData()メソッドは、取得するデータのタイプの単一の引数を取り、それに関連付けられた文字列値を返すため、ドラッグ項目を取得します。

allowedEffectプロパティとdropEffectプロパティは、ユーザーに表示されるフィードバックを制御するのに役立ちます。

このようなフィードバックを処理することは開発者の責任であり、dropイベントハンドラに実装する必要があります。 たとえば、要素を取得して別の親に追加すると、要素が移動しますが、ノードをコピーするとコピー効果が発生します。,

単一のドロップゾーンに対して複数のドロップ効果が定義されている場合、dropEffectプロパティを使用して、この特定のドロップイベントに対してどのド

以下は、ドロップを処理する例です。

同じデータの異なるタイプをサポートしている場合がありますが、最も特定のタイプのみを取得したい場合があります。 MDN docsの次のコードはそれを示しています。,

8)ドロップが成功したかどうかを確認するためにdragendイベントを使用します

ドラッグ操作の終わり イベントの火災かどうかをドラッグに成功したん取り消されます。

ドラッグ操作が成功したかどうかをチェックするには、dropEffectの値を次のようにチェックできます。

• dragendイベントハンドラでdropEffectプロパティの値が”none”の場合、ドラッグ操作がキャンセルされたことを意味します。,
• それ以外の場合、dropEffectプロパティの値は、正常に実行された操作です。

うーん、これはどのように役立ちますか？

ソース要素は、移動操作が成功した後にこの情報を使用して、ドラッグされたアイテムを古い場所から削除できます。

HTML要素のドラッグに関するデモ&ドロップ

注：ここで私のGithubからプロジェクトをクローンすることもできます。,

1) Detect the Drag & Drop Feature Support in Your Browser

Before using the HTML drag & drop API, add feature detection code to ensure browser support.

The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

2)ドロップゾーン（ドロップ場所）を定義します

デフォルトでは、HTMLドキュメント内の要素はドロップを許可しません。 しかし、それは変更することができ、要素をドロップゾーンにするには、

• ondragoverイベントハンドラが必要です。
• ondropイベントハンドラで、ファイルがドロップ場所にドロップされたときに実行されます。,

MDN docsによって述べられているように：

osからブラウザにファイルをドラッグするときにdragstartおよびdragendイベントは発生しません。

次に、要素をドロップ位置として定義する例を示します。

3)ファイルのドロップを処理します

ユーザーがドロップゾーンにファイルをドロップすると、ドロップイベントがトリガーされます。 Dropイベント中は、ファイルを必要に応じて処理する必要があります。,

削除された各ファイルにアクセスするには、イベントのDataTransferプロパティを使用してfilesプロパティにアクセスします。 削除されたファイルにアクセスした後、File APIを使用して処理します。

ブラウザーがDataTransferItemListプロパティをサポートしている場合は、DataTransferプロパティを使用してファイルにアクセスする代わりに、getAsFile()メソッドで使用できます。

dragoverイベントハンドラーとdropイベントハンドラーの両方で、preventDefault()を呼び出して、ドロップを許可する必要があります。, これは、webページにファイルをドロップするときに発生するデフォルトの動作です。

条件が使用されている特定の状況でのみドロップが許可される場合、ドロップを許可する条件が満たされている場合にのみpreventDefaultを追加します。 この防止を要素とするドロップゾーンが条件を満たしていないが落ちないことがございます。

MDN docsの次の例は、ファイルではないドラッグ項目が無視されるドロップされたファイルの処理を示しています。, Both possible ways are demonstrated in this

Demo on HTML Element’s Drag & Drop

Note: you can also clone the project from my Github here.

---