HTMLオンドラッグオーバーイベント属性
例
要素がドロップターゲット上にドラッグされているときにJavaScriptを実行します。
<div ondragover="myFunction(event)"></div>
定義と使用法
ondragover属性は、ドラッグ可能な要素またはテキスト選択が有効なドロップターゲット上にドラッグされているときに発生します。
デフォルトでは、データ/要素を他の要素にドロップすることはできません。ドロップを許可するには、要素のデフォルトの処理を防ぐ必要があります。これは、ondragover属性のevent.preventDefault()メソッドを呼び出すことによって行われます。
ドラッグアンドドロップは、HTML5の非常に一般的な機能です。これは、オブジェクトを「つかんで」別の場所にドラッグするときです。詳細については、HTML5ドラッグアンドドロップに関するHTMLチュートリアルを参照してください。
注:要素をドラッグ可能にするには、グローバルHTML5 ドラッグ可能属性を使用します。
ヒント:リンクと画像はデフォルトでドラッグ可能であり、ドラッグ可能な属性は必要ありません。
ドラッグアンドドロップ操作のさまざまな段階で使用され、発生する可能性のある多くのイベント属性があります。
- ドラッグ可能なターゲット(ソース要素)で発生したイベント:
- ondragstart-ユーザーが要素のドラッグを開始したときに発生します
- ondrag-要素がドラッグされているときに発生します
- ondragend-ユーザーが要素のドラッグを終了したときに発生します
- ドロップターゲットで発生したイベント:
- ondragenter-ドラッグされた要素がドロップターゲットに入ると発生します
- ondragover-ドラッグされた要素がドロップターゲットの上にあるときに発生します
- ondragleave-ドラッグされた要素がドロップターゲットを離れたときに発生します
- ondrop-ドラッグされた要素がドロップターゲットにドロップされたときに発生します
注:要素をドラッグしている間、ondragoverイベントは350ミリ秒ごとに発生します。
ブラウザのサポート
表の数字は、イベント属性を完全にサポートする最初のブラウザバージョンを示しています。
Event Attribute | |||||
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
構文
<element ondragover="script">
属性値
Value | Description |
---|---|
script | The script to be run on ondragover |
技術的な詳細
サポートされているHTMLタグ: | すべてのHTML要素 |
---|
関連ページ
HTMLチュートリアル:HTML5ドラッグアンドドロップ
HTMLリファレンス:HTMLドラッグ可能属性
HTML DOMリファレンス:ondragoverイベント
❮HTMLイベント属性