dragenter(ondragenter)イベント
dragenter(ondragenter)イベントは、設定されたタグエレメント上にドラッグされた他のエレメントが入ったら発生するDragEventインターフェイスのイベントです。 対象のエレメントがドラッグできることが前提です。
タグエレメントをドラッグ出来るようにするには、そのエレメントにdraggable要素を設定します。
URLリンク、イメージはデフォルトでドラッグできます。draggable要素を設定しないでください。
スクリプトを作成する際の注意点
ドラッグ、ドロップを操作するには以下のイベントを利用する必要があります。大きく分けて、ドラッグ&ドロップするエレメントに設けるイベントと、そのエレメントを受け入れるエレメントに設けるイベントがあります。
ドラッグ、ドロップするエレメントのイベント
- 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
ドラッグするエレメントには、dragstartイベントとdragイベント、draggable="true"を設定します。
ドロップされるエレメントにはdragoverイベントとdropイベント、ondragenterイベントが必要です。
dragstartイベントによって呼び出される関数には、event.dataTransfer.setData()関数が必要です。
dragoverイベントによって呼び出される関数には、event.preventDefault()関数が必要です。
dropイベントによって呼び出される関数には、event.preventDefault()関数、event.target.appendChild()関数が必要です。
ondragenterイベントによって呼び出される関数の結果は開発コンソールに表示されます。
関連(Related)
HTML、CSS、DOMのマウス、キーボード、タッチデバイス、カーソルに関する用途一覧です。
HTML
CSS
DOM
- 全般
-
- インターフェイス
- UiEvent
- イベント
- which
- プロパティ
- altKey、 ctrlKey、 metaKey、 relatedTarget、 shiftKey
- メソッド
- getModifierState()
- マウス
-
- インターフェイス
- DragEvent、 MouseEvent
- イベント
- click、 contextmenu、 dblclick、 dragend、 dragenter、 dragleave、 dragover、 dragstart、 drop、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 show、 onwheel
- プロパティ
- button、 buttons、 clientX、 clientY、 code、 deltaMode、 deltaX、 deltaY、 deltaZ、 pageX、 pageY、 screenX、 screenY
- メソッド
- キーボード
- タッチデバイス
-
- インターフェイス
- TouchEvent
- イベント
- touchcancel、 touchend、 touchmove、 touchstart、 transitionend
- プロパティ
- メソッド