ondragイベントとは、ドラッグ操作中のイベント。
構文
HTML
<element ondrag="イベントハンドラ">
例
div要素
<div ondrag="イベントハンドラ">div要素</div>
span要素
<span ondrag="イベントハンドラ">span要素</span>
li要素
<li ondrag="イベントハンドラ">リスト項目</li>
JavaScript
object.ondrag = function(){ イベントハンドラ };
サンプル１
HTMLドキュメント上でイベントハンドラを登録するサンプル。
サンプルドラッグＡ
ドラッグ操作中：0
サンプル１の動作について
- 「サンプルドラッグＡ」をドラッグしている間、「ドラッグ操作中：」の右横の数値に１を加算する。
- 「サンプルドラッグＡ」のドラッグをやめると、加算も停止する。
- FireFox、Chrome、IE11にて動作確認。
サンプル１のソースコード
JavaScript
<script type="text/javascript">
function sampleAOnDragStart( $event ){
$event.dataTransfer.setData( "Text", $event.target.id );
};
var $countA = 0;
function sampleACountUp() {
document.getElementById( "sampleOutputA" ).innerHTML = ++$countA;
}
</script>
function sampleAOnDragStart( $event ){
$event.dataTransfer.setData( "Text", $event.target.id );
};
var $countA = 0;
function sampleACountUp() {
document.getElementById( "sampleOutputA" ).innerHTML = ++$countA;
}
</script>
HTML
<p>
<span id="sampleDragA" draggable="true" ondragstart="sampleAOnDragStart( event );" ondrag="sampleACountUp( event );">サンプルドラッグＡ</span>
</p>
<p>
ドラッグ操作中：<span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>
<span id="sampleDragA" draggable="true" ondragstart="sampleAOnDragStart( event );" ondrag="sampleACountUp( event );">サンプルドラッグＡ</span>
</p>
<p>
ドラッグ操作中：<span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>
CSS
<style>
#sampleDragA {
padding: 0 5px;
border: 1px solid gray;
background-color: yellow;
cursor: pointer;
}
</style>
#sampleDragA {
padding: 0 5px;
border: 1px solid gray;
background-color: yellow;
cursor: pointer;
}
</style>
サンプル２
JavaScript上で動的にイベントハンドラを登録するサンプル。
サンプルドラッグＢ
ドラッグ操作中：0
サンプル２の動作について
- 「サンプルドラッグＢ」をドラッグしている間、「ドラッグ操作中：」の右横の数値に１を加算する。
- 「サンプルドラッグＢ」のドラッグをやめると、加算も停止する。
- FireFox、Chrome、IE11にて動作確認。
サンプル２のソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleDragB" ).ondragstart = function( $event ){
$event.dataTransfer.setData( "Text", $event.target.id );
};
document.getElementById( "sampleDragB" ).ondrag = function(){
sampleBCountUp();
};
}
var $countB = 0;
function sampleBCountUp() {
document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
</script>
window.onload = function () {
document.getElementById( "sampleDragB" ).ondragstart = function( $event ){
$event.dataTransfer.setData( "Text", $event.target.id );
};
document.getElementById( "sampleDragB" ).ondrag = function(){
sampleBCountUp();
};
}
var $countB = 0;
function sampleBCountUp() {
document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
</script>
HTML
<p>
<span id="sampleDragB" draggable="true">サンプルドラッグＢ</span>
</p>
<p>
ドラッグ操作中：<span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>
<span id="sampleDragB" draggable="true">サンプルドラッグＢ</span>
</p>
<p>
ドラッグ操作中：<span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>
CSS
<style>
#sampleDragB {
padding: 0 5px;
border: 1px solid gray;
background-color: yellow;
cursor: pointer;
}
</style>
#sampleDragB {
padding: 0 5px;
border: 1px solid gray;
background-color: yellow;
cursor: pointer;
}
</style>