ondragenterイベント
例
ドラッグ可能な要素がドロップターゲットに入ったときにJavaScriptを実行します。
<div ondragenter="myFunction(event)"></div>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
ondragenterイベントは、ドラッグ可能な要素またはテキスト選択が有効なドロップターゲットに入るときに発生します。
ondragenterイベントとondragleaveイベントは、ドラッグ可能な要素がドロップターゲットに出入りしようとしていることをユーザーが理解するのに役立ちます。これは、たとえば、ドラッグ可能な要素がドロップターゲットに入るときに背景色を設定し、要素がターゲットから移動するときに色を削除することによって実行できます。
ドラッグアンドドロップは、HTML5の非常に一般的な機能です。これは、オブジェクトを「つかんで」別の場所にドラッグするときです。詳細については、HTML5ドラッグアンドドロップに関するHTMLチュートリアルを参照してください。
注:要素をドラッグ可能にするには、グローバルHTML5 ドラッグ可能属性を使用します。
ヒント:リンクと画像はデフォルトでドラッグ可能であり、ドラッグ可能な属性は必要ありません。
ドラッグアンドドロップ操作のさまざまな段階で使用され、発生する可能性のあるイベントは多数あります。
- ドラッグ可能なターゲット(ソース要素)で発生したイベント:
- ondragstart-ユーザーが要素のドラッグを開始したときに発生します
- ondrag-要素がドラッグされているときに発生します
- ondragend-ユーザーが要素のドラッグを終了したときに発生します
- ドロップターゲットで発生したイベント:
- ondragenter-ドラッグされた要素がドロップターゲットに入るときに発生します
- ondragover-ドラッグされた要素がドロップターゲットの上にあるときに発生します
- ondragleave-ドラッグされた要素がドロップターゲットを離れるときに発生します
- ondrop-ドラッグされた要素がドロップターゲットにドロップされたときに発生します
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
Event | |||||
---|---|---|---|---|---|
ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
構文
HTMLの場合:
<element ondragenter="myScript">
JavaScriptの場合:
object.ondragenter = function(){myScript};
JavaScriptでは、addEventListener()メソッドを使用します。
object.addEventListener("dragenter", myScript);
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | はい |
---|---|
キャンセル可能: | はい |
イベントタイプ: | DragEvent |
サポートされているHTMLタグ: | すべてのHTML要素 |
DOMバージョン: | レベル3のイベント |
その他の例
例
考えられるすべてのドラッグアンドドロップイベントのデモンストレーション:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
関連ページ
HTMLチュートリアル:HTML5ドラッグアンドドロップ
HTMLリファレンス:HTMLドラッグ可能属性