dragend ( ondragend )イベント

　dragend ( ondragend )イベントは、設定されたHTMLエレメントのドラッグが終了したら発生する DragEvent インターフェイスのイベントです。

dragend イベントを追加（ ondragend イベントハンドラーとして追加）

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

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

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

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

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

　dragend ( ondragend )イベントの定義は GlobalEventHandlers ミックスインを参照してください。

- ad -

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

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

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

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

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

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

構文（Syntax）

in HTML

<tagelement ondragend="oneFunction()">

in JavaScript

object.ondragend = function(){ };

object.addEventListener("dragend", script_);

備考（Remarks）

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

Example

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

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

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

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

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

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

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

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

HTML内容

CSS内容

Script内容

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

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

/*
document.getElementById("drag_test").addEventListener("drag", (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)=>{
	console.log( event );
	event.preventDefault();
	var data = event.dataTransfer.getData("Text");
	event.target.appendChild(document.getElementById(data));
});