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

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

HTMLのondropイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップ先（ターゲット）にドロップされた瞬間に発火するイベント属性です。ドラッグ＆ドロップ操作を実装する際には、ondragstartやondragoverなどのイベント属性と組み合わせて使用されるのが一般的です。

構文

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

<tagname ondrop="script"></tagname>

属性値には、ドロップされたときに実行したいJavaScriptのコードまたは関数名を指定します。

サンプルコード

それでは、実際にondropイベント属性を使った例を見てみましょう。以下のデモでは、赤い円を2つのボックス間でドラッグ＆ドロップして移動させることができます。

<!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 ondrop Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" 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 dragging(event) {
        document.querySelector(".show").innerHTML = "Circle is being dragged";
    }
    function allowDrop(event) {
        event.preventDefault();
    }
    function drop(event) {
        event.preventDefault();
        event.target.appendChild(document.querySelector('.circle'));
        document.querySelector(".show").innerHTML = "Circle was dropped";
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、次のように2つのボックスとその中に赤い円が表示されます。

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

この状態で、赤い円をマウスでドラッグし、もう一方のボックスの上でドロップしてみてください。ondropイベントが発火し、円がドロップ先のボックス内へ移動します。

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

処理の流れのポイント

このサンプルにおける各イベント属性の役割は以下の通りです。

  • ondragstart：ドラッグ開始時に呼び出され、dataTransfer.setData()で転送するデータを設定します。
  • ondragover：要素の上でドラッグ中に継続的に発生するイベントです。event.preventDefault()を呼び出すことで、デフォルトの「ドロップ禁止」動作を解除し、ドロップを許可します。
  • ondrop：ドロップされた瞬間に呼び出されます。ここでもpreventDefault()が必要で、その後にappendChild()で要素を移動させています。

特に重要なのは、ondragover側でもpreventDefault()を呼び出さないと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イベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード