ondrag - ドラッグ中に発火する

投稿日:

JavaScriptのイベントハンドラ、ondragはドラッグ中に発火して処理を実行します。

説明

要素をドラッグ中
要素をドラッグ中

イベントハンドラのondragは、ドラッグ中に継続して発火します。ドラッグ操作中は要素を動かしていなくても、何回も繰り返し処理が実行される点にご注意下さい。

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

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

サンプルコード

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

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

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

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

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

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

デモ

ondragイベントを設定しました。要素をドラッグしてみて下さい。イベントが発生するごとに、発生回数がカウントアップされます。

関連項目

外部リンク