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();
});

- ad -

構文（Syntax）

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

in HTML

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

in JavaScript

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

addEventListener()

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

object.addEventListener("dragexit ", function_name);

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

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

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

備考（Remarks）


Bubbles	Yes
Cancelable	Yes
Interface	Event
Supported HTML Elements	全般

Example

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

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

HTML内容

CSS内容

Script内容

// dragexit
document.getElementById("area_a").addEventListener("dragexit", (event)=>{
	console.log( event );
	document.getElementById('viewer').innerHTML = "<br />dragexit イベントが起きました!!"
});

/*
document.getElementById("drag_test").addEventListener("drag", (event)=>{
});
*/

/*
document.getElementById("drag_test").addEventListener("dragend", (event)=>{
});
*/

document.getElementById("drag_test").addEventListener("dragstart", (event)=>{
	  event.dataTransfer.setData("Text", event.target.id);
});

document.getElementById("area_b").addEventListener("dragover", (event)=>{
	event.preventDefault();
});

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

document.getElementById("area_b").addEventListener("drop", (event)=>{
	event.preventDefault();
	var data = event.dataTransfer.getData("Text");
	event.target.appendChild(document.getElementById(data));
});

document.getElementById("area_a").addEventListener("dragover", (event)=>{
	event.preventDefault();
});

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

document.getElementById("area_a").addEventListener("drop", (event)=>{
	event.preventDefault();
	var data = event.dataTransfer.getData("Text");
	event.target.appendChild(document.getElementById(data));
});