備忘録的プログラミングリファレンス

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>

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

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

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

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)

BubblesYes
CancelableYes
InterfaceDragEvent
Supported HTML ElementsALL 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コード例が実行されます。

ポインターやドラッグ&ドロップに関連するイベント

 以下はポインターやドラッグ&ドロップに関連するイベントです。

ドラッグ&ドロップ
イベント概要
drag ( ondrag )設定されたタグエレメントまたはテキストがドラッグされたら
dragend ( ondragend )設定されたHTMLエレメントのドラッグが終了したら
dragenter ( ondragenter )設定されたタグエレメント上にドラッグされた他のエレメントが入ったら
dragexit ( ondragexit )dragleave に同じ。ほとんどのブラウザで使えません
dragleave ( ondragleave )設定されたタグエレメント上にからドラッグされたエレメントが離れたら
dragover ( ondragover )設定されたHTMLエレメント上に他のエレメントが乗ったら
dragstart ( ondragstart )エレメントのドラッグが始まったら
drop ( ondrop )設定されたHTMLエレメントに他のエレメントがドロップされたら
ポインティングデバイス
イベント概要
gotpointercapture ( ongotpointercapture )ポインターイベントのキャプチャー対象に設定されたら
pointercancel ( onpointercancel )ポインターによるイベントが発生しないとなったとき
pointerdown ( onpointerdown )ポインターは押されたら
pointerenter ( onpointerenter )ポインターが領域上に入ったら
pointerleave ( onpointerleave )ポインターが領域上から離れたら
pointermove ( onpointermove )ポインターが移動したら
pointerout ( onpointerout )ポインターが反応条件から離れたら
pointerover ( onpointerover )ポインターが領域内に入ったら
pointerup ( onpointerup )ポインターがアクティブでなくなったら