HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。

構文（Syntax）

ondragenterイベント属性の基本的な書き方は以下のとおりです。

<tagname ondragenter="script"></tagname>

対象となるタグの属性として「ondragenter」を指定し、値にはイベント発生時に実行したいJavaScriptのコードを記述します。

使用例（Example）

ここでは、2つのドロップエリアの間で赤い円をドラッグ＆ドロップできるデモを通して、ondragenterイベント属性の動作を確認してみましょう。要素がドロップゾーンに入ると背景色が変わり、メッセージが表示される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .drop-target {
        display: inline-block;
        width: 150px;
        height: 150px;
        border: 2px solid #FFF;
        margin: 1rem;
        vertical-align: middle;
        padding: 20px;
    }
    .circle {
        background: #db133a;
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
    .show {
        color: #fff;
        font-size: 1.2rem;
    }
</style>
</head>
<body>
<h1>HTML ondragenterイベント属性のデモ</h1>
<div class="drop-target" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget" class='circle'></p>
</div>
<div class="drop-target" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>赤い円をドラッグ＆ドロップしてみてください</p>
<div class="show"></div>
<script>
    function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
    }
    function dragEnter(event) {
        if (event.target.className == "drop-target") {
            event.target.style.background = "#db133a3d";
            document.querySelector(".show").innerHTML = "ドロップゾーンに入りました";
        }
    }
    function dragLeave(event) {
        if (event.target.className == "drop-target") {
            event.target.style.background = "transparent";
            document.querySelector(".show").innerHTML = "ドロップゾーンから出ました";
        }
    }
    function allowDrop(event) {
        event.preventDefault();
    }
    function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.querySelector('.circle'));
    }
</script>
</body>
</html>

コードのポイント

  • dragStart()： ドラッグ開始時に対象要素のIDをdataTransferオブジェクトに保存します。
  • dragEnter()： 要素がドロップターゲットに入ったとき、背景色を半透明の赤に変更し、メッセージを表示します。
  • dragLeave()： 要素がドロップターゲットから出たとき、背景を透明に戻します。
  • allowDrop()： デフォルトのブラウザ挙動を無効化し、ドロップを許可します。
  • drop()： ドロップされた要素を受け入れ、ドロップ先へ移動させます。

実行結果（Output）

上記のコードをブラウザで開くと、次のように2つのドロップエリアと赤い円が表示されます。

HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

次に、赤い円を2つのボックス間でドラッグ＆ドロップしてみましょう。円がドロップゾーンに入った瞬間にondragenterイベントが発火し、背景色の変化とメッセージ表示が確認できます。

HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

まとめ

ondragenterイベント属性は、ドラッグ中の要素がドロップ可能な領域に入ったタイミングを検知できる便利なイベントです。ondragover、ondragleave、ondropなどの関連イベントと組み合わせることで、直感的で操作性の高いドラッグ＆ドロップUIを簡単に実装できます。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード