ondragover - ドラッグ中のマウスポインタが重なっている時に発火する

投稿日:

JavaScriptのイベントハンドラ、ondragoverはドラッグ中のマウスポインタが重なっている時に発火して処理を実行します。

説明

イベントハンドラのondragoverは、ドラッグ中のマウスポインタ、対象要素に重なっている最中に継続的に発火します。イベントを設定するのは、ドラッグで運ぶ要素ではなくドラッグの受け入れ先となる要素です。

マウスポインタが対象要素に重なっている
マウスポインタが対象要素に重なっている

ドラッグ操作中のmouseoverイベントだと理解して下さい。要素と要素が重なっている時と勘違いしがちですが違います。判定材料はマウスポインタです。処理が繰り返し実行される点にご注意下さい。

<div draggable="true"></div>

要素をドラッグ可能にするには、draggable属性にtrueを指定して下さい。

サンプルコード

<div id="target">目的の要素</div>
// 要素を取得
var divElement = document.getElementById( "target" ) ;

// 処理を定義
var action = function() {
	// 処理内容
}

//　イベントを設定 ( addEventListener )
divElement.addEventListener( "dragover", action ) ;

// イベントを削除
divElement.removeEventListener( "dragover", action ) ;
// 要素を取得
var divElement = document.getElementById( "target" ) ;

// イベントを設定 ( ondragover )
divElement.ondragover = function() {
	// 処理内容
}

// イベントを削除
divElement.ondragover = null ;

デモ

ondragoverイベントを設定しました。ドラッグ操作中、青色の要素にマウスポインタを重ねてみて下さい。イベントが発生するごとに、発生回数がカウントアップされます。

関連項目

外部リンク