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

HTMLのondragイベント属性とは？構文とサンプルコードで解説

HTMLのondragイベント属性は、ユーザーがHTMLドキュメント内でHTML要素をドラッグしている間に発生するイベントです。ドラッグ＆ドロップ操作を実装する際に活用され、要素がドラッグされている間、指定したJavaScriptが実行されます。

なお、img要素やa要素（リンク）はデフォルトでドラッグ可能になっているため、これらの要素に対してondrag属性を明示的に指定する必要はありません。

構文

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

<tagname ondrag=”script”></tagname>

サンプルコード

それでは、HTML ondragイベント属性の具体的な使用例を見てみましょう。以下の例では、赤い円をドラッグすると画面にメッセージが表示されます。

<!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 ondrag 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>

実行結果

ブラウザで上記のコードを実行すると、次のように表示されます。

HTMLのondragイベント属性とは？構文とサンプルコードで解説

2つのボックスの間で赤い円をドラッグ＆ドロップしてみてください。ドラッグ中は「Circle is being dragged（円をドラッグ中）」というメッセージが表示され、ドロップすると「Circle was dropped（円をドロップしました）」というメッセージに切り替わります。このようにondragイベント属性を利用することで、要素がドラッグされている間の動作を柔軟に制御できます。

HTMLのondragイベント属性とは？構文とサンプルコードで解説

  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イベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード