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

ドラッグした要素がターゲット上にあるときにJavaScriptで発生するイベントはどれですか？

ドラッグ＆ドロップ操作において、ondragoverイベントは、ドラッグ中の要素がドロップターゲット（ドロップ先）の上に重なっている間に発生します。このイベントは、ユーザーに「ここにドロップできる」という視覚的なフィードバックを与えたり、実際にドロップを許可するための準備処理を行ったりする際に重要な役割を果たします。

ondragoverイベントを使う際の注意点

ondragoverイベントハンドラ内では、必ずevent.preventDefault()を呼び出す必要があります。これは、ブラウザがデフォルトで行う「データのドロップを拒否する」動作を無効化し、その後のdropイベントが正しく発生するようにするためです。この処理を忘れると、要素をドロップしても何も起こりません。

関連するドラッグ＆ドロップイベント一覧

  • dragstart： 要素のドラッグが開始されたときに発生
  • dragover： ドラッグ中の要素が有効なドロップターゲット上にあるときに発生
  • dragleave： ドラッグ中の要素がドロップターゲットから離れたときに発生
  • dragend： ドラッグ操作が終了したときに発生
  • drop： ドラッグされた要素がターゲット上でドロップされたときに発生

実装例

以下のコードを実行して、JavaScriptでondragoverイベントを実装する方法を確認してみましょう。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         .drag {
            float: left;
            width: 100px;
            height: 35px;
            border: 2px dashed #876587;
            margin: 15px;
            padding: 10px;
         }
      </style>
   </head>

   <body>
      <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)">
         <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">ドラッグ！</p>
      </div>
      <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
      <div id="box"></div>
      <p>左のボックスを右へ、または右のボックスを左へドラッグしてください。</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function dragEnd(event) {
            document.getElementById("box").innerHTML = "ドラッグが終了しました！";
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML = "要素のドロップに成功しました！";
         }
      </script>
   </body>
</html>

このサンプルでは、左右のボックス間でテキスト要素をドラッグ＆ドロップできます。ondragoverでpreventDefault()を呼び出すことでドロップを許可し、ドロップ時にはdataTransferオブジェクトを通じてデータを受け渡しています。

  1. 【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法

    addEventListener()メソッドとはJavaScriptでは、addEventListener()メソッドを使うことで、指定した要素にイベントハンドラ（イベントリスナー）を登録できます。このメソッドの最大の特徴は、すでに設定されているイベントハンドラを上書きせずに新しいハンドラを追加できる点です。そのため、1つの要素に対して複数のイベントハンドラを同時に登録することも可能です。さらに、addEventListener()を利用すると、バブリング（イベントの伝播）への反応の仕方を柔軟に制御できます。mouseoverやclickをはじめ、さまざまな種類のイベントを扱えるのも魅力です。

  2. JavaScriptのnew.targetメタプロパティとは？使い方をわかりやすく解説

    JavaScriptのnew.targetとはnew.targetは、関数やコンストラクタが実行時にnewキーワードを使って呼び出されたかどうかを判定できるメタプロパティです。通常、関数をnewをつけずに呼び出すと、コンストラクタとして意図された関数でも単なる通常の関数として実行されてしまい、グローバルオブジェクトにプロパティが設定されるなどの予期しない動作を引き起こす可能性があります。new.targetを利用することで、このような誤用を検出し、エラーとして通知することができます。new演算子とともに呼び出された場合、new.targetは呼び出されたコンストラクタ自身への参照を返します。一