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

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

ondragendイベント属性とは

HTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。

なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。

構文

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

<tagname ondragend="script"></tagname>

属性値には、イベント発生時に実行したいJavaScriptのコードを指定します。

サンプルコード

ここでは、赤い円をドラッグ&ドロップするデモを通じて、ondragendイベント属性の実際の動作を確認してみましょう。

<!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 ondragend Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondragend="dragFinished(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);
      document.querySelector(".show").innerHTML = "Started to drag the red circle.";
   }
   function dragFinished(event) {
      document.querySelector(".show").innerHTML = "Finished dragging the red circle.";
   }
   function allowDrop(event) {
      event.preventDefault();
   }
   function drop(event) {
      event.preventDefault();
      event.target.appendChild(document.querySelector('.circle'));
   }
</script>
</body>
</html>

コードのポイント

  • ドラッグ対象の要素にはdraggable="true"を設定します。
  • ondragstartでドラッグ開始時の処理を、ondragendでドラッグ終了時の処理を定義しています。
  • ドロップ先のボックスにはondragoverとondropを設定し、ドロップを可能にしています。

実行結果

上記のコードをブラウザで開くと、2つのボックスと赤い円が表示されます。

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

赤い円をもう一方のボックスへドラッグ&ドロップしてみてください。ドラッグを開始すると「Started to drag the red circle.」、ドラッグを終了すると「Finished dragging the red circle.」というメッセージが表示され、ondragendイベントが正しく動作していることが確認できます。

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

まとめ

ondragendイベント属性を使えば、ドラッグ操作が完了したタイミングを簡単に検知できます。dragstartやdropなど、他のドラッグ関連イベントと組み合わせることで、直感的で使いやすいドラッグ&ドロップUIを効率的に実装できるでしょう。

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

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値

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

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