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

JavaScriptでドラッグした要素がドロップされたときに発生するイベントは？ondropイベントの使い方を解説

JavaScriptでドラッグ＆ドロップを実装する際、ドラッグされた要素がドロップ先に置かれた瞬間に発生するのは「ondrop」イベントです。

ondropイベントは単体では機能せず、通常は以下のドラッグ関連イベントと組み合わせて使います。

  • dragstart … 要素のドラッグが開始されたときに発生
  • dragover … 要素がドロップ先の上にある間に継続的に発生（preventDefault() を呼ばないとドロップできない）
  • drop … 要素がドロップ先に置かれたときに発生
  • dragend … ドラッグ操作が終了したときに発生

ondropイベントの実装例

次のコードは、2つのボックス間で要素をドラッグ＆ドロップするシンプルなサンプルです。左のボックスを右へ、右のボックスを左へ移動できます。

<!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">Drag!</p>
      </div>
      <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
      <div id="box"></div>
      <p>Drag the left box to the right or drag the right box to the left.</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function dragEnd(event) {
            document.getElementById("box").innerHTML = "Dragging ends!";
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML = "The element dropped successfully!";
         }
      </script>
   </body>
</html>

コードのポイント

  • dragStart()：dataTransfer.setData() を使って、ドラッグする要素のIDを保存します。
  • dropNow()：dragover イベント側で preventDefault() を呼び出すことが重要です。これを行わないと drop イベントが発火しません。
  • drop()：getData() で保存しておいたIDを取得し、appendChild() によってその要素をドロップ先へ移動させます。
  • dragEnd()：ドラッグ操作の終了時にメッセージを表示します。

このように、ondrop イベントは dragstart・dragover とセットで実装することで、直感的なドラッグ＆ドロップ操作を実現できます。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

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

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