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

HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

HTMLのondragleaveイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップターゲット（ドロップ先）から離れた瞬間に発生するイベントです。ドラッグ＆ドロップ操作では、要素がドロップゾーンに入ったときに発生するondragenterと対になるイベントであり、両者を組み合わせることで、ユーザーにとって分かりやすい視覚的フィードバックを実現できます。

構文

ondragleaveイベント属性の基本的な構文は以下のとおりです。

<tagname ondragleave=”script”></tagname>

それでは、HTMLのondragleaveイベント属性を使った具体的な例を見ていきましょう。

サンプルコード

<!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 ondragleave Event Attribute Demo</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>Now try to drag and drop the red circle</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 = "Passed into the dropzone";
        }
    }
    function dragLeave(event) {
        if (event.target.className == "drop-target") {
            event.target.style.background = "transparent";
            document.querySelector(".show").innerHTML = "Passed out the dropzone";
        }
    }
    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>

実行結果

HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

このサンプルでは、赤い円を2つのボックス（ドロップターゲット）の間でドラッグ＆ドロップしてみましょう。円がボックスの中に入ると背景色が変わり、「Passed into the dropzone」というメッセージが表示されます。そして、円がボックスから出たタイミングでondragleaveイベントが発火し、背景色が透明に戻るとともに「Passed out the dropzone」というメッセージに切り替わります。

HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

ondragleaveイベントのポイント

  • ondragleaveは、ドラッグ中の要素がドロップゾーンから出た瞬間に発生します。
  • ドロップを有効にするには、ondragoverイベント内でevent.preventDefault()を呼び出す必要があります。
  • ondragenter（進入時）とondragleave（退出時）を組み合わせることで、ハイライト表示のオン・オフなど直感的なUI演出が可能になります。
  • 実際のドロップ処理には、ondropイベント属性を使用します。
  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イベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード