ondragenterイベントとは、マウスのポインタ（カーソル）が、ドラッグしながら最初に要素上を移動した時のイベント。
構文
HTML
<element ondragenter="イベントハンドラ">
例
div要素
<div ondragenter="イベントハンドラ">div要素</div>
p要素
<p ondragenter="イベントハンドラ">p要素</p>
ul要素
<ul ondragenter="イベントハンドラ">
<li>リスト項目</li>
</ul>
<li>リスト項目</li>
</ul>
JavaScript
object.ondragenter = function(){ イベントハンドラ };
サンプル１
HTMLドキュメント上でイベントハンドラを登録するサンプル。
2
1
ドロップ領域に入った回数：0
サンプル１の動作について
- 「2」をドラッグし、背景色が薄い青色である領域にドロップすると、領域内の数値に「2」を掛け合わせる。
- 「2」をドラッグし、背景色が薄い青色である領域に入る度に、「ドロップ領域に入った回数：」の右横の数値に１を加算する。
- FireFox、Chrome、IE11にて動作確認。
サンプル１のソースコード
JavaScript
<script type="text/javascript">
function sampleAOnDragStart( $event ){
$event.dataTransfer.setData( "Text", $event.target.innerHTML );
};
function sampleADrop( $event, $this ){
var $data = $event.dataTransfer.getData( "Text" );
$this.innerHTML = $this.innerHTML * $data;
};
var $countA = 0;
function sampleACountUp() {
document.getElementById( "sampleOutputA" ).innerHTML = ++$countA;
}
</script>
function sampleAOnDragStart( $event ){
$event.dataTransfer.setData( "Text", $event.target.innerHTML );
};
function sampleADrop( $event, $this ){
var $data = $event.dataTransfer.getData( "Text" );
$this.innerHTML = $this.innerHTML * $data;
};
var $countA = 0;
function sampleACountUp() {
document.getElementById( "sampleOutputA" ).innerHTML = ++$countA;
}
</script>
HTML
<p>
<span id="sampleDragA" draggable="true" ondragstart="sampleAOnDragStart( event );">2</span>
</p>
<div
id="sampleDropA"
ondrop="sampleADrop( event, this );
event.preventDefault();"
ondragenter="sampleACountUp(); event.preventDefault();"
ondragover="event.preventDefault();"
>
1
</div>
<p>
ドロップ領域に入った回数：<span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>
<span id="sampleDragA" draggable="true" ondragstart="sampleAOnDragStart( event );">2</span>
</p>
<div
id="sampleDropA"
ondrop="sampleADrop( event, this );
event.preventDefault();"
ondragenter="sampleACountUp(); event.preventDefault();"
ondragover="event.preventDefault();"
>
1
</div>
<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;
}
#sampleDropA {
width: 500px;
padding: 20px 0;
background-color: lightblue;
text-align: center;
}
</style>
#sampleDragA {
padding: 0 5px;
border: 1px solid gray;
background-color: yellow;
cursor: pointer;
}
#sampleDropA {
width: 500px;
padding: 20px 0;
background-color: lightblue;
text-align: center;
}
</style>
サンプル２
JavaScript上で動的にイベントハンドラを登録するサンプル。
2
1
ドロップ領域に入った回数：0
サンプル２の動作について
- 「2」をドラッグし、背景色が薄い青色である領域にドロップすると、領域内の数値に「2」を掛け合わせる。
- 「2」をドラッグし、背景色が薄い青色である領域に入る度に、「ドロップ領域に入った回数：」の右横の数値に１を加算する。
- FireFox、Chrome、IE11にて動作確認。
サンプル２のソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $sampleDragB = document.getElementById( "sampleDragB" );
var $sampleDropB = document.getElementById( "sampleDropB" );
$sampleDragB.ondragstart = function( $event ){
$event.dataTransfer.setData( "Text", $event.target.innerHTML );
};
$sampleDropB.ondragenter = function( $event ){
sampleBCountUp( $event );
$event.preventDefault();
};
$sampleDropB.ondragover = function( $event ){
$event.preventDefault();
};
$sampleDropB.ondrop = function( $event ){
$event.preventDefault();
var $data = $event.dataTransfer.getData( "Text" );
this.innerHTML = this.innerHTML * $data;
};
}
var $countB = 0;
function sampleBCountUp( $event ) {
document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
</script>
window.onload = function () {
var $sampleDragB = document.getElementById( "sampleDragB" );
var $sampleDropB = document.getElementById( "sampleDropB" );
$sampleDragB.ondragstart = function( $event ){
$event.dataTransfer.setData( "Text", $event.target.innerHTML );
};
$sampleDropB.ondragenter = function( $event ){
sampleBCountUp( $event );
$event.preventDefault();
};
$sampleDropB.ondragover = function( $event ){
$event.preventDefault();
};
$sampleDropB.ondrop = function( $event ){
$event.preventDefault();
var $data = $event.dataTransfer.getData( "Text" );
this.innerHTML = this.innerHTML * $data;
};
}
var $countB = 0;
function sampleBCountUp( $event ) {
document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
</script>
HTML
<p>
<span id="sampleDragB" draggable="true">2</span>
</p>
<div id="sampleDropB">1</div>
<p>
ドロップ領域に入った回数：<span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>
<span id="sampleDragB" draggable="true">2</span>
</p>
<div id="sampleDropB">1</div>
<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;
}
#sampleDropB {
width: 500px;
padding: 20px 0;
background-color: lightblue;
text-align: center;
}
</style>
#sampleDragB {
padding: 0 5px;
border: 1px solid gray;
background-color: yellow;
cursor: pointer;
}
#sampleDropB {
width: 500px;
padding: 20px 0;
background-color: lightblue;
text-align: center;
}
</style>