HTML5 ドラッグ＆ドロップ

HTML5では、ウェブページ上で要素をドラッグ＆ドロップするための機能が追加されました。

この機能を使って、ユーザーが直感的に操作できるインタラクティブなウェブアプリケーションを作成することができます。

基本的な使い方

基本的な使い方

HTML5のドラッグ＆ドロップ機能は、以下の手順で実装できます。

ドラッグ可能な要素を設定する
ドロップ領域を設定する
ドラッグ＆ドロップイベントを処理する

①ドラッグ可能な要素を設定する

ドラッグ可能な要素には、draggable属性を設定します。この属性は、要素がドラッグ可能かどうかを指定します。

<div id="dragItem" draggable="true">ドラッグしてください</div>

②ドロップ領域を設定する

ドロップ領域は、ユーザーがドラッグした要素をドロップできる場所です。ドロップ領域には、特別な属性は必要ありませんが、通常はCSSで適切にスタイリングされています。

<div id="dropZone" style="width: 250px; height: 250px; border: 2px dashed #ccc;"></div>

③ドラッグ＆ドロップイベントを処理する

ドラッグ＆ドロップ機能を実装するには、いくつかのイベントを処理する必要があります。これらのイベントは、ドラッグ＆ドロップ操作のさまざまな段階で発生します。

主なイベントは以下の通りです。

dragstart: 要素のドラッグが開始されたときに発生します。
dragover: ドラッグ中の要素がドロップ領域の上にある間、継続的に発生します。
drop: ドラッグ中の要素がドロップ領域にドロップされたときに発生します。
dragend: ドラッグ操作が終了したときに発生します。

これらのイベントをJavaScriptで処理し、適切なアクションを実行します。

以下は、基本的なドラッグ＆ドロップ機能の実装例です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    #dragItem {
      width: 100px;
      height: 100px;
      rgb(247, 98, 147);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #dropZone {
      width: 250px;
      height: 250px;
      border: 2px dashed #ccc;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="dragItem" draggable="true">ドラッグしてください</div>
  <div id="dropZone"></div>

  <script>
    var dragItem = document.getElementById("dragItem");
    var dropZone = document.getElementById("dropZone");

    dragItem.addEventListener("dragstart", function (e) {
      e.dataTransfer.setData("text/plain", dragItem.id);
    });

    dropZone.addEventListener("dragover", function (e) {
      e.preventDefault();
    });

    dropZone.addEventListener("drop", function (e) {
      e.preventDefault();
      var data = e.dataTransfer.getData("text/plain");
      var draggedElement = document.getElementById(data);
      dropZone.appendChild(draggedElement);
    });
  </script>
</body>
</html>

表示例

ドラッグしてください

この例では、dragstartイベントでドラッグされる要素のIDをデータとして設定し、dropイベントでそのデータを取得して、ドロップされた要素をドロップ領域に追加しています。また、dragoverイベントでe.preventDefault()を呼び出すことで、デフォルトのドロップを禁止し、カスタムドロップ動作を許可しています。

以下は、より詳細なコメントを追加したドラッグ＆ドロップ機能のJavaScriptコードです。

<script>
  // DOM要素を取得
  var dragItem = document.getElementById("dragItem");
  var dropZone = document.getElementById("dropZone");

  // ドラッグ開始時のイベントリスナー
  dragItem.addEventListener("dragstart", function (e) {
    // データ転送オブジェクトに、ドラッグされている要素のIDを設定
    e.dataTransfer.setData("text/plain", dragItem.id);
  });

  // ドラッグアイテムがドロップゾーンの上にある間、dragoverイベントが発生
  dropZone.addEventListener("dragover", function (e) {
    // デフォルトのブラウザの挙動をキャンセル（これにより、ドロップが許可される）
    e.preventDefault();
  });

  // ドロップ時のイベントリスナー
  dropZone.addEventListener("drop", function (e) {
    // デフォルトのブラウザの挙動をキャンセル
    e.preventDefault();
    // データ転送オブジェクトから、ドラッグされた要素のIDを取得
    var data = e.dataTransfer.getData("text/plain");
    // IDを元に、ドラッグされた要素を取得
    var draggedElement = document.getElementById(data);
    // ドロップゾーンにドラッグされた要素を追加
    dropZone.appendChild(draggedElement);
  });
</script>