HTMLオンドラッグオーバー属性


定義と使用法

ondragover属性は、ドラッグ可能な要素またはテキスト選択が有効なドロップターゲット上にドラッグされているときに発生します。

デフォルトでは、データ/要素を他の要素にドロップすることはできません。ドロップを許可するには、要素のデフォルトの処理を防ぐ必要があります。これは、ondragover属性のevent.preventDefault()メソッドを呼び出すことによって行われます。

ドラッグアンドドロップについては、 HTML5ドラッグアンドドロップに関するHTMLチュートリアルをお読みください

ヒント:リンクと画像はデフォルトでドラッグ可能であり、ドラッグ可能な属性は必要ありません。

ドラッグアンドドロップ操作のさまざまな段階で使用され、発生する可能性のある多くのイベント属性があります。

  • ドラッグ可能なターゲット(ソース要素)で発生したイベント
    • ondragstart-ユーザーが要素のドラッグを開始したときに発生します
    • ondrag-要素がドラッグされているときに発生します
    • ondragend-ユーザーが要素のドラッグを終了したときに発生します

  • ドロップターゲットで発生したイベント:
    • ondragenter-ドラッグされた要素がドロップターゲットに入ると発生します
    • ondragover-ドラッグされた要素がドロップターゲットの上にあるときに発生します
    • ondragleave-ドラッグされた要素がドロップターゲットを離れたときに発生します
    • ondrop-ドラッグされた要素がドロップターゲットにドロップされたときに発生します

注:要素をドラッグしている間、ondragoverイベントは350ミリ秒ごとに発生します。


に適用されます

ondragover属性は、イベント属性の一部であり、任意のHTML要素で使用できます。

要素 イベント
すべてのHTML要素 オンドラッグオーバー

Divの例

要素がドロップターゲット上にドラッグされているときにJavaScriptを実行します。

<div ondragover="myFunction(event)"></div>

ブラウザのサポート

表の数字は、イベント属性を完全にサポートする最初のブラウザバージョンを示しています。

Event Attribute
ondragover 4.0 9.0 3.5 6.0 12.0