dragleave ( ondragleave )イベント

　dragleave ( ondragleave )イベントは、設定されたエレメントがドラッグで離れたら発生するDragEvent インターフェイスのイベントです。対象のエレメントがドラッグできることが前提です。
　この dragleave ( ondragleave )イベントは dragexit イベントと同じです。どちらが使えるかはブラウザによります。
　このイベントが機能するかは以下のExampleで確認ができます。

dragleave イベント

document.getElementById('example').addEventListener("dragleave", (event)=>{
	console.log( 'event type : ' + event.type );
});

詳しくは Example を参照してください

　エレメントのドラッグは、属性　draggable='true' またはに HTMLElement.draggable = 'true'; することで可能になります。
　ただし、URLリンク、イメージはデフォルトでドラッグできますのでdraggable属性を設定しません。

ドラッグ機能を可能にする

<p draggable="true">draggableの設定方法</p>

- ad -

スクリプトを作成する際の注意点

ドラッグ、ドロップを操作するには以下のイベントを利用する必要があります。大きく分けて、ドラッグ＆ドロップするエレメントに設けるイベントと、そのエレメントを受け入れるエレメントに設けるイベントがあります。

ドラッグ、ドロップするエレメントのイベント

ondragstart: ドラッグが始まったら発生します。ドラッグするエレメント情報を取得します。
ondrag: ドラッグをする間発生します。ドラッグをする間、350milliseconds毎にondragイベントが発生します。
ondragend: ドラッグが終了したら発生します。

受け入れるエレメントのイベント

ondragenter: 設定されたタグエレメントに他のエレメントがドロップされたら発生します。
ondragover: 設定されたタグエレメント上を他のエレメントをドラッグすると発生します。
ondragleave: 設定されたタグエレメントから他のエレメントがドラッグによって離れたら発生します。
ondrop: 設定されたタグエレメントに他のエレメントをドロップすると発生します。

構文（Syntax）

in HTML

<tagelement ondragleave="oneFunction()">

in JavaScript

object.ondragleave = function(){ };

object.addEventListener("dragleave", script_);

備考（Remarks）

Bubbles	Yes
Cancelable	Yes
Interface	DragEvent
Supported HTML Elements	ALL HTML elements

Example

　dragleave ( ondragleave )イベントの例です。dragleave イベントの発生は開発用コンソールに表示されます。
　コードの編集方法としては以下のようになります。

　ドラッグするエレメントには、dragstartイベントとdragイベント、draggable="true"を設定します。

　ドロップされるエレメントにはdragoverイベントとdropイベント、dragleaveイベントが必要です。

　dragstartイベントによって呼び出される関数には、event.dataTransfer.setData()関数が必要です。

　dragoverイベントによって呼び出される関数には、event.preventDefault()関数が必要です。

　dropイベントによって呼び出される関数には、event.preventDefault()関数、event.target.appendChild()関数が必要です

　dragleaveイベントによって呼び出される関数の結果は開発コンソールに表示されます。

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

HTML内容

CSS内容

Script内容

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

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

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

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

/*
*	for area_b
*/
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));
});

/*
*	for area_a
*/
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));
});