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

HTML DOM DragEvent(ドラッグイベント)の使い方を徹底解説

HTML DOM DragEventとは

HTML DOM DragEvent(ドラッグイベント)は、選択されたテキストや要素がドラッグ&ドロップされる際に実行されるイベントの一種です。このイベントはHTML5で新たに導入され、直感的なドラッグ&ドロップ操作を実装するために広く利用されています。

プロパティ

HTML DOM DragEventには、以下のプロパティが用意されています。

プロパティ説明
dataTransferユーザーがドラッグまたはドロップしているデータを返します。

構文

DragEventの基本的な構文は以下のとおりです。

Object.DragEventType= function_name;

ここで、function_nameにはイベント発生時に実行したい関数を指定します。

イベントの種類

DragEventオブジェクトに属するイベントタイプは、以下の7種類です。

イベント説明
ondrag要素がドラッグされている間に発生します。
ondragendユーザーによる要素のドラッグが完了したときに発生します。
ondragenterドラッグされた要素がドロップ先に入ったときに発生します。
ondragleaveドラッグ中の要素がドロップ先から離れたときに発生します。
ondragoverドラッグ中の要素がドロップ先の上にあるときに発生します。
ondragstartユーザーが要素のドラッグを開始したときに発生します。
ondropドラッグされた要素がドロップ先にドロップされたときに発生します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   .DivDrop {
      float: left;
      width: 100px;
      height: 40px;
      margin:10px;
      border: 1px solid blue;
      background-color:lightgreen;
      font-weight:bold;
   }
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
   document.ondragstart = function(event) {
      event.dataTransfer.setData("Text", "spanDrag");
      document.getElementById("spanDrag").innerText="drag Text";
      document.getElementById("spanDrag").style.backgroundColor="lightgreen";
   };
   document.ondrag = function(event) {
      document.getElementById("Sample").innerHTML = "Span element is being dragged";
   };
   document.ondragover = function(event) {
      event.preventDefault();
   };
   document.ondrop = function(event) {
      event.preventDefault();
      if(event.target.className=="DivDrop"){
         var txt = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(txt));
         document.getElementById(txt).innerText="Dragged Text";
         document.getElementById(txt).style.backgroundColor="lightyellow";
         document.getElementById("Sample").innerHTML = "The span element is dropped";
      }
   };
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOM DragEvent(ドラッグイベント)の使い方を徹底解説

「Drag This!」というテキストをドラッグすると、表示が「drag Text」に変わります。

HTML DOM DragEvent(ドラッグイベント)の使い方を徹底解説

さらに、その「drag Text」を2つ目のdivにドロップすると、次のようになります。

HTML DOM DragEvent(ドラッグイベント)の使い方を徹底解説

コードの解説

上記のサンプルコードでは、以下のような処理を行っています。

1. HTMLとCSSの準備

まず、同じクラス名「DivDrop」を持つ2つのdiv要素を作成しています。これにより、両方の要素に共通のCSSスタイルを適用できます。最初の<div>要素の中には、後ほどドラッグする<span>要素が含まれています。

.DivDrop {
   float: left;
   width: 100px;
   height: 40px;
   margin:10px;
   border: 1px solid blue;
   background-color:lightgreen;
   font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>

2. ondragstartイベントの処理

次に、イベント発生時に実行される複数の関数を作成しています。最初の関数はondragstartイベントに紐付けられており、ユーザーがテキストのドラッグを開始したタイミングで発生します。この関数内では、ドラッグデータの型とデータを受け取るsetData()メソッドを呼び出しています。ここでは型に「text」、データには<span>要素のIDを指定しています。なお、本来はevent.target.idを使って対象のIDを動的に取得するのが望ましいですが、ここでは説明を簡略化するために名前を直接指定しています。

document.ondragstart = function(event) {
   event.dataTransfer.setData("Text", "spanDrag");
   document.getElementById("spanDrag").innerText="drag Text";
   document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};

3. ondragイベントの処理

ondragイベントに関連付けられた関数は、innerHTMLプロパティを使って<p>要素のテキストを「Span element is being dragged」に書き換えます。ondragイベントは、ユーザーがテキストをドラッグしている間に発生します。

document.ondrag = function(event) {
   document.getElementById("Sample").innerHTML = "Span element is being dragged";
};

4. ondragoverイベントの処理

ondragoverイベントに関連付けられた関数では、event.preventDefault()メソッドを使って、dragover時に発生するデフォルトの動作をキャンセルしています。dragoverイベントは、ドラッグ中の要素がドロップ先の上にある間、継続的に発生します。

document.ondragover = function(event) {
   event.preventDefault();
};

5. ondropイベントの処理

ondropイベントに関連付けられた関数も、まずデフォルトの動作をキャンセルします。その後、ドロップ先が2つ目の<div>要素かどうかを判定しています。この判定を行わないと、テキストがページ上のどこにでもドロップされてしまい、Webページのレイアウトが崩れる原因になります。

続いて、getData()メソッドを使って「text」型のドラッグデータを取得します。この例で取得される要素は<span>です。取得した<span>要素を2つ目のdivの子要素として追加し、innerTextと背景色を変更することで、ドロップ後の状態をわかりやすく表示しています。

document.ondrop = function(event) {
   event.preventDefault();
   if(event.target.className=="DivDrop"){
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText="Dragged Text";
      document.getElementById(txt).style.backgroundColor="lightyellow";
      document.getElementById("Sample").innerHTML = "The span element is dropped";
   }
  1. HTML DOMのtouchstartイベントとは？基本構文と実装例をわかりやすく解説

    HTML DOMのtouchstartイベントは、ユーザーがタッチスクリーンに指を触れた瞬間に発生するイベントです。スマートフォンやタブレットなど、タッチ操作に対応したデバイスで動作するWebアプリケーションを開発する際に重要な役割を果たします。注意：このイベントはタッチ対応デバイス（モバイル端末やタッチパネル搭載PCなど）でのみ発生します。マウスのみの環境では動作しないため、必要に応じてmousedownイベントとの併用も検討しましょう。touchstartイベントの構文HTML属性で指定する場合ontouchstart = eventFunction()JavaScriptで指定する場合e

  2. HTML DOMのtouchmoveイベントとは？基本構文とサンプルコードで学ぶタッチ操作

    HTML DOMのtouchmoveイベントは、タッチスクリーン上で指（タッチポイント）が移動している間、継続的に発生するイベントです。指を画面に触れたままスライドさせるたびに何度も発火するため、ドラッグ操作やペイントアプリ、ミニゲームなど、インタラクティブなタッチUIを実装する場面で非常に役立ちます。 ※ 注意：このイベントはスマートフォンやタブレットなどタッチ対応デバイス専用です。マウス操作では発生しないため、動作確認の際はタッチ端末を使用してください。 touchmoveイベントの基本構文 1. HTMLの属性として記述する場合 ontouchmove = "eventFu