dragover ( ondragover )イベント

　dragover ( ondragover )イベントは、設定されたHTMLエレメント上に他のエレメントが乗ったら発生する DragEvent インターフェイスのイベントです。

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

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

in JavaScript

object.ondragover = function(){ };

object.addEventListener("dragover", script_);

備考（Remarks）

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

Example

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

　ドラッグするエレメントには、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内容

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

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