HTMLElement: dragenter イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
dragenter イベントは、ドラッグ中のイベントやテキストの選択範囲が、有効なドロップターゲットに入ったときに発生します。ターゲットオブジェクトは、ユーザーが直接選択した要素（ドロップ対象としてユーザーが直接示した要素）、または <body> 要素です。
このイベントはキャンセル可能で、Document オブジェクトと Window オブジェクトまでバブルアップする可能性があります。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。
js
addEventListener("dragenter", (event) => {}); ondragenter = (event) => {}; イベント型
イベントプロパティ
以下に挙げたプロパティに加えて、親である Event から継承したプロパティもあります。
DragEvent.dataTransfer読取専用-
ドラッグ＆ドロップ操作の間に転送されるデータです。
例
dragenter のドロップゾーンのスタイル付け
この例では、コンテナーの中にドラッグ可能な要素を入れています。この要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。
ドラッグ可能な要素がコンテナーの上にある間、 dragenter イベントを待ち受けて、他のコンテナーの背景を紫色にし、ドラッグ可能な要素がコンテナーにドロップされることを知らせます。
しかし、この例ではドロップは実装していません。ドラッグ＆ドロップの完全な例については、drag イベントのページを参照してください。
HTML
html
<div class="dropzone"> <div id="draggable" draggable="true">この div はドラッグ可</div> </div> <div class="dropzone" id="droptarget"></div> CSS
css
body { /* 例でユーザーがテキストを選択するのを防ぐ */ user-select: none; } #draggable { text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin: 10px; padding: 10px; } .dropzone.dragover { background-color: purple; } JavaScript
js
const target = document.getElementById("droptarget"); target.addEventListener("dragenter", (event) => { // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する if (event.target.classList.contains("dropzone")) { event.target.classList.add("dragover"); } }); target.addEventListener("dragleave", (event) => { // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする if (event.target.classList.contains("dropzone")) { event.target.classList.remove("dragover"); } }); 結果
仕様書
| Specification |
|---|
| HTML # handler-ondragenter |
| HTML # event-dnd-dragenter |