HTMLondragenterイベント属性

❮HTMLイベント属性

ドラッグ可能な要素がドロップターゲットに入ったときにJavaScriptを実行します。

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

定義と使用法

ondragenter属性は、ドラッグ可能な要素またはテキスト選択が有効なドロップターゲットに入ると起動します。

ondragenterイベントとondragleaveイベントは、ドラッグ可能な要素がドロップターゲットに出入りしようとしていることをユーザーが理解するのに役立ちます。これは、たとえば、ドラッグ可能な要素がドロップターゲットに入るときに背景色を設定し、要素がターゲットから移動するときに色を削除することによって実行できます。

ドラッグアンドドロップは、HTML5の非常に一般的な機能です。これは、オブジェクトを「つかんで」別の場所にドラッグするときです。詳細については、HTML5ドラッグアンドドロップに関するHTMLチュートリアルを参照してください。

注:要素をドラッグ可能にするには、グローバルHTML5 ドラッグ可能属性を使用します。

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

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

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

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

ブラウザのサポート

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

Event Attribute
ondragenter 4.0 9.0 3.5 6.0 12.0

構文

<element ondragenter="script">

属性値

Value Description
script The script to be run on ondragenter

技術的な詳細

サポートされているHTMLタグ: すべてのHTML要素

関連ページ

HTMLチュートリアル:HTML5ドラッグアンドドロップ

HTMLリファレンス:HTMLドラッグ可能属性

HTML DOMリファレンス:ondragenterイベント


❮HTMLイベント属性