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

【HTML】ondragover属性で要素が有効なドロップターゲット上にドラッグされたときにスクリプトを実行する方法

ondragover属性とは

HTMLで要素をドラッグ＆ドロップする際、ドラッグ中の要素が有効なドロップターゲット上に重なっている間、ondragover属性に設定したスクリプト（イベントハンドラ）が継続的に発火します。

ここで重要なポイントがあります。ブラウザのデフォルト動作ではデータのドロップが禁止されているため、dragoverイベント内で必ず event.preventDefault() を呼び出してデフォルトの挙動をキャンセルする必要があります。この処理を忘れると、その後の drop イベントが発火せず、ドロップ処理が一切行われません。

実装例

以下のコードは、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)" ondrag = "draggingNow(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 draggingNow(event) {
            document.getElementById("box").innerHTML = "Dragged successfully!";
         }
         function dropNow(event) {
            event.preventDefault();
         }
         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>

コードの解説

1. ドラッグ開始時：dragStart関数

draggable="true" を指定した要素のドラッグが開始されると、ondragstartイベントが発火します。dataTransfer.setData() メソッドで、ドラッグ対象要素のIDを「Text」形式のデータとして保存しています。

2. ドラッグ中：draggingNow関数

要素がドラッグされている間、ondragイベントが継続的に発生し、画面下部のボックスに「Dragged successfully!」というメッセージを表示します。

3. ドロップターゲット上での処理：dropNow関数

ドラッグ中の要素がドロップ可能な領域上にある間、ondragoverイベントが発火します。ここで event.preventDefault() を呼び出すことで、ブラウザが持つ「ドロップ禁止」のデフォルト動作を解除し、ドロップを許可しています。

4. ドロップ完了時：drop関数

要素が実際にドロップされるとondropイベントが発火します。dataTransfer.getData() で保存しておいたIDを取得し、appendChild() を使ってドラッグ元の要素をドロップ先へ移動させます。

まとめ

ondragover属性は、ドラッグ＆ドロップUIを実装するうえで欠かせないイベントの一つです。特に preventDefault() の呼び出しを忘れないことが成功の鍵となります。ファイルアップロードエリアやリストの並べ替えなど、さまざまな場面で応用できるので、ぜひマスターしておきましょう。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実