例
ドラッグ可能な要素をドロップターゲットの外に移動したときにJavaScriptを実行します。
<div ondragleave="myFunction(event)"></div> »それを自分で試してみてください 定義と使用法
ondragleaveドラッグ可能な要素やテキストの選択が有効なドロップターゲットを残し属性が発生します。
ondragenterとondragleaveイベントは、ユーザーがドラッグ可能な要素が入力するか、ドロップターゲットを残すことを約あることを理解するのに役立ちます。 これは、例えば、ドラッグ可能要素をドロップターゲットに入射する背景色を設定し、要素が標的から移動された色を除去することによって行うことができます。
ドラッグ＆ドロップは、HTML5で非常に共通の特徴です。 あなたがオブジェクトを「つかむ」と別の場所にドラッグしたときです。 詳細については、上の私たちのHTMLチュートリアルを参照してくださいHTML5のドラッグ＆ドロップを 。
注意：要素がドラッグできるようにするには、グローバルHTML5を使用draggable属性を。
ヒント：リンクや画像は、デフォルトでドラッグ可能であり、必要のないdraggable属性を。
ドラッグ＆ドロップ操作の異なる段階で、そこに使用される多くのイベント属性があり、発生する可能性があります。
- ドラッグ可能なターゲット （ソース要素） に発砲イベント ：
- ondragstart -火災ユーザーが要素をドラッグを開始
- ondrag -要素がドラッグされている火災
- ondragend -ユーザーが要素をドラッグし終えた火災
- ドロップターゲットに発砲イベント：
- ondragenter -火災ドラッグされた要素がドロップターゲットに入ります
- ondragover -火災ドラッグされた要素がドロップターゲット上にあります
- ondragleave -火災ドラッグされた要素がドロップターゲットを残します
- ondrop -火災ドラッグされた要素をドロップターゲットにドロップされました
ブラウザのサポート
表中の数字は完全にサポートする最初のブラウザのバージョンを指定event属性を。
| イベント属性 | |||||
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML 4.01とHTML5の違い
ondragleave属性はHTML5で新しく追加されました。
構文
<elementondragleave=" script ">
属性値
| 値 | 説明 |
|---|---|
| script | ondragleave上で実行するスクリプト |
技術的詳細
| サポートされているHTMLタグ： | すべてのHTML要素 |
|---|
関連ページ
HTMLチュートリアル： HTML5ドラッグ＆ドロップ
HTMLリファレンス： HTML draggable属性
HTML DOMリファレンス： ondragleaveイベント