備忘録的プログラミングリファレンス

dragexit ( ondragexit )イベント

 dragexit ( ondragexit )イベントは、このイベントが設定されたエレメントからドラッグされたエレメントが離れたら発生するイベントです。 この dragexit ( ondragexit )イベントは dragleave イベントと同じです。

 ほとんどのブラウザではこの dragexit イベントは使えません。利用しないようにしましょう。

 このイベントが機能するかは以下の「 Example 」で確認ができます。

dragexit イベントを追加( ondragexit イベントハンドラーとして追加)
document.getElementById('example').addEventListener("dragexit", (event)=>{
	console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

 エレメントのドラッグは、 属性 draggable='true' またはに HTMLElement.draggable = 'true'; することで可能になります。

 さらに、drop イベントが機能するようにするためには、dragover 、dragenter イベントのコールバック関数に Event.preventDefault(); を加えます。 そのことで、drop イベントが機能するようになります。

drop イベントが機能するようにする
document.getElementById("dropped_area").addEventListener("dragover", (event)=>{
	event.preventDefault();
});

document.getElementById("dropped_area").addEventListener("dragenter", (event)=>{
	event.preventDefault();
});

ページ内 Index

構文(Syntax)

 HTMLPreElement にイベントハンドラーを定義する方法には以下があります。

in HTML

<tagelement ondragexit ="function(); ...;">

in JavaScript

object.ondragexit  = function(){... };

addEventListener()

 イベントタイプを第1引数に指定します。関数を直接に呼び出には、関数名のみを第2引数に指定します。ただし、その関数に event 以外の引数が渡せません。

object.addEventListener("dragexit ", function_name);

 スクリプトを直接記述する方法があります。この方法では、関数に引数を指定して呼び出せます。

object.addEventListener("dragexit ", ()=>{ ... },false);
// または
object.addEventListener("dragexit ",function(){ ... },false);

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

備考(Remarks)

BubblesYes
CancelableYes
InterfaceEvent
Supported HTML Elements全般

Example

 dragexit ( ondragexit )イベントの例です。以下の「確認」ボタンをクリックしてください。Example が動きます。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

ポインターやドラッグ&ドロップに関連するイベント

 以下はポインターやドラッグ&ドロップに関連するイベントです。

ドラッグ&ドロップ
イベント概要
drag ( ondrag )設定されたタグエレメントまたはテキストがドラッグされたら
dragend ( ondragend )設定されたHTMLエレメントのドラッグが終了したら
dragenter ( ondragenter )設定されたタグエレメント上にドラッグされた他のエレメントが入ったら
dragexit ( ondragexit )dragleave に同じ。ほとんどのブラウザで使えません
dragleave ( ondragleave )設定されたタグエレメント上にからドラッグされたエレメントが離れたら
dragover ( ondragover )設定されたHTMLエレメント上に他のエレメントが乗ったら
dragstart ( ondragstart )エレメントのドラッグが始まったら
drop ( ondrop )設定されたHTMLエレメントに他のエレメントがドロップされたら
ポインティングデバイス
イベント概要
gotpointercapture ( ongotpointercapture )ポインターイベントのキャプチャー対象に設定されたら
pointercancel ( onpointercancel )ポインターによるイベントが発生しないとなったとき
pointerdown ( onpointerdown )ポインターは押されたら
pointerenter ( onpointerenter )ポインターが領域上に入ったら
pointerleave ( onpointerleave )ポインターが領域上から離れたら
pointermove ( onpointermove )ポインターが移動したら
pointerout ( onpointerout )ポインターが反応条件から離れたら
pointerover ( onpointerover )ポインターが領域内に入ったら
pointerup ( onpointerup )ポインターがアクティブでなくなったら