drop ( ondrop )イベント

　drop ( ondrop )イベントは、このイベントが設定された HTML エレメントに他のエレメントがドロップされたら発生する DragEvent インターフェイスのイベントです。

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

document.getElementById('example').addEventListener("drop", (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 ondrop="oneFunction()">

in JavaScript

object.ondrop = function(){ };

object.addEventListener("drop", script_);

備考（Remarks）

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

Example

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

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

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

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

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

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

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

HTML内容

CSS内容

Script内容

// drop event for area_b
document.getElementById("area_b").addEventListener("drop", (event)=>{
	event.preventDefault();
	var data = event.dataTransfer.getData("Text");
	event.target.appendChild(document.getElementById(data));
	console.log( event );
	document.getElementById('viewer').innerHTML = "<br />drop イベントが起きました!!"
});

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

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