HTML ondragleave イベント属性

❮ HTML イベント属性

ドラッグ可能な要素をドロップターゲットの外に移動したときに JavaScript を実行します:

<div ondragleave="myFunction(event)"></div>
Try it Yourself ❯

定義と用法

ondragleave 属性は、ドラッグ可能な要素やテキスト選択が有効なドロップターゲットを離れるときに発火します。

>ondragenter および ondragleave イベントは、ユーザがドロップターゲットに入ろうとしているのか、 離れようとしているのかを理解するのに役立てることができます。 Tこれは、ドラッグ可能な要素がドロップターゲットに入ったときに背景色を設定し、要素がターゲットから移動するときに色を削除するような場合に 使用することができます。

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

注: 要素をドラッグできるようにするには、 グローバル HTML5 draggable 属性を使用します。

チップ: リンクや画像は、デフォルトでドラッグ可能であり、draggable 属性の必要はありません。

ドラッグ&ドロップ操作のいろいろな段階で、使用されたり、発生する可能性がある多くの event 属性があります:


ブラウザ・サポート

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

イベント属性
ondragleave 4.0 9.0 3.5 6.0 12.0

HTML 4.01 と HTML5 の相違点

ondragleave 属性は、HTML5 で新しく追加されました。


構文

<element ondragleave="script">

属性値

説明
script script は ondragleave で実行される

技術的詳細

サポートする HTML タグ: ALL HTML elements

関連ページ

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

HTML Reference: HTML draggable Attribute

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


HTML Event Attributes HTML イベント属性