備忘録的プログラミングリファレンス

dragover(ondragover)イベント

 dragover(ondragover)イベントは、設定されたHTMLエレメント上に他のエレメントが入ったらが発生するイベントです。

 タグエレメントをドラッグ出来るようにするには、そのエレメントにdraggable要素を設定します。

 URLリンク、イメージはデフォルトでドラッグできます。draggable要素を設定しないでください。

スクリプトを作成する際の注意点

ドラッグ、ドロップを操作するには以下のイベントを利用する必要があります。大きく分けて、ドラッグ&ドロップするエレメントに設けるイベントと、そのエレメントを受け入れるエレメントに設けるイベントがあります。

ドラッグ、ドロップするエレメントのイベント

ondragstart
ドラッグが始まったら発生します。ドラッグするエレメント情報を取得します。
ondrag
ドラッグをする間発生します。ドラッグをする間、350milliseconds毎にondragイベントが発生します。
ondragend
ドラッグが終了したら発生します。

受け入れるエレメントのイベント

ondragenter
設定されたタグエレメントに他のエレメントがドロップされたら発生します。
ondragover
設定されたタグエレメント上を他のエレメントをドラッグすると発生します。
ondragleave
設定されたタグエレメントから他のエレメントがドラッグによって離れたら発生します。
ondrop
設定されたタグエレメントに他のエレメントをドロップすると発生します。

Syntax

in HTML

<tagelement ondragover="oneFunction()">

in JavaScript

object.ondragover = function(){ }; object.addEventListener("dragover", script_);

備考(Remarks)

BubblesYes
CancelableYes
InterfaceDragEvent
Supported HTML ElementsALL HTML elements

Example

 ドラッグするエレメントには、dragstartイベントとdragイベント、draggable="true"を設定します。

 ドロップされるエレメントにはdragoverイベントとdropイベントが必要です。

 dragstartイベントによって呼び出される関数には、event.dataTransfer.setData()関数が必要です。

 dragoverイベントによって呼び出される関数には、event.preventDefault()関数が必要です。

 dropイベントによって呼び出される関数には、event.preventDefault()関数、event.target.appendChild()関数が必要です

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。