dragenter ( ondragenter )イベント
dragenter ( ondragenter )イベントは、設定されたタグエレメント上にドラッグされた他のエレメントが入ったら発生するDragEventインターフェイスのイベントです。 対象のエレメントがドラッグできることが前提です。
document.getElementById('example').addEventListener("dragenter", (event)=>{
console.log( 'event type : ' + event.type );
});
エレメントのドラッグは、 属性 draggable='true' またはに HTMLElement.draggable = 'true'; することで可能になります。
ただし、URLリンク、イメージはデフォルトでドラッグできますのでdraggable属性を設定しません。
<p draggable="true">draggableの設定方法</p>
スクリプトを作成する際の注意点
ドラッグ、ドロップを操作するには以下のイベントを利用する必要があります。大きく分けて、ドラッグ＆ドロップするエレメントに設けるイベントと、そのエレメントを受け入れるエレメントに設けるイベントがあります。
ドラッグ、ドロップするエレメントのイベント
- ondragstart
- ドラッグが始まったら発生します。ドラッグするエレメント情報を取得します。
- ondrag
- ドラッグをする間発生します。ドラッグをする間、350milliseconds毎にondragイベントが発生します。
- ondragend
- ドラッグが終了したら発生します。
受け入れるエレメントのイベント
- ondragenter
- 設定されたタグエレメントに他のエレメントがドロップされたら発生します。
- ondragover
- 設定されたタグエレメント上を他のエレメントをドラッグすると発生します。
- ondragleave
- 設定されたタグエレメントから他のエレメントがドラッグによって離れたら発生します。
- ondrop
- 設定されたタグエレメントに他のエレメントをドロップすると発生します。
Syntax
in HTML
<tagelement ondragenter="oneFunction()">
in JavaScript
object.ondragenter = function(){ };
object.addEventListener("dragenter", script_);
備考（Remarks）
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | DragEvent |
| Supported HTML Elements | ALL HTML elements |
Example
dragenter ( ondragenter )イベントの例です。dragenter イベントの発生は開発用コンソールに表示されます。
コードの編集方法としては以下のようになります。
ドラッグするエレメントには、dragstartイベントとdragイベント、draggable="true"を設定します。
ドロップされるエレメントにはdragoverイベントとdropイベント、ondragenterイベントが必要です。
dragstartイベントによって呼び出される関数には、event.dataTransfer.setData()関数が必要です。
dragoverイベントによって呼び出される関数には、event.preventDefault()関数が必要です。
dropイベントによって呼び出される関数には、event.preventDefault()関数、event.target.appendChild()関数が必要です。
ondragenterイベントによって呼び出される関数の結果は開発コンソールに表示されます。
ポインターやドラッグ＆ドロップに関連するイベント
以下はポインターやドラッグ＆ドロップに関連するイベントです。
| ドラッグ＆ドロップ | |
|---|---|
| イベント | 概要 |
| drag ( ondrag ) | 設定されたタグエレメントまたはテキストがドラッグされたら |
| dragend ( ondragend ) | 設定されたHTMLエレメントのドラッグが終了したら |
| dragenter ( ondragenter ) | 設定されたタグエレメント上にドラッグされた他のエレメントが入ったら |
| dragexit ( ondragexit ) | dragleave に同じ。ほとんどのブラウザで使えません |
| dragleave ( ondragleave ) | 設定されたタグエレメント上にからドラッグされたエレメントが離れたら |
| dragover ( ondragover ) | 設定されたHTMLエレメント上に他のエレメントが乗ったら |
| dragstart ( ondragstart ) | エレメントのドラッグが始まったら |
| drop ( ondrop ) | 設定されたHTMLエレメントに他のエレメントがドロップされたら |
| ポインティングデバイス | |
| イベント | 概要 |
| gotpointercapture ( ongotpointercapture ) | ポインターイベントのキャプチャー対象に設定されたら |
| pointercancel ( onpointercancel ) | ポインターによるイベントが発生しないとなったとき |
| pointerdown ( onpointerdown ) | ポインターは押されたら |
| pointerenter ( onpointerenter ) | ポインターが領域上に入ったら |
| pointerleave ( onpointerleave ) | ポインターが領域上から離れたら |
| pointermove ( onpointermove ) | ポインターが移動したら |
| pointerout ( onpointerout ) | ポインターが反応条件から離れたら |
| pointerover ( onpointerover ) | ポインターが領域内に入ったら |
| pointerup ( onpointerup ) | ポインターがアクティブでなくなったら |