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

HTMLで要素をドラッグ可能にする方法｜draggable属性の使い方を解説

HTMLで要素がドラッグ可能かどうかを設定するには、draggable属性を使用します。この属性には「true」（ドラッグ可能）または「false」（ドラッグ不可）の値を指定できます。

draggable属性の基本構文

<element draggable="true">ドラッグ可能な要素</element>

draggable属性を「true」に設定しただけでは、実際にドラッグ＆ドロップを機能させるためにJavaScriptのイベント処理が必要です。主な関連イベントは以下の通りです。

  • dragstart：ドラッグ開始時に発生し、dataTransferオブジェクトに転送するデータを設定します。
  • dragover：要素の上をドラッグ中に発生します。デフォルト動作を無効化しないとドロップが許可されないため、preventDefault()の呼び出しが必須です。
  • drop：要素がドロップされたときに発生し、dataTransferからデータを取得して移動処理を行います。

実装例

以下のコードは、draggable属性と各種イベントを組み合わせて、ボックス同士をドラッグ＆ドロップで入れ替える例です。左側のボックスを右側へ、あるいは右側のボックスを左側へドラッグしてお試しください。

<!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>

コードのポイント

  • dragStart()：ドラッグ開始時に対象要素のIDをdataTransferに保存し、後ほどドロップ先で利用できるようにします。
  • dropNow()：dragoverイベントでpreventDefault()を呼び出すことで、その領域へのドロップを有効化しています。
  • drop()：保存していたIDをもとに要素を取得し、appendChild()でドロップ先へ移動させます。あわせてメッセージ表示も更新しています。

このように、draggable属性とHTML5のドラッグ＆ドロップAPIを組み合わせることで、ライブラリに依存せず直感的なUIを簡単に実装できます。

  1. HTMLのcurrentTargetイベントプロパティとは？使い方を実例付きで解説

    currentTargetイベントプロパティとはHTMLのcurrentTargetイベントプロパティは、イベントリスナー（イベントハンドラー）が登録されており、そのイベントを実際に処理している要素を取得するために使用されるプロパティです。以下に構文を示します。event.currentTarget戻り値としては、イベントリスナーが設定された要素への参照（Elementオブジェクト）が返されます。実装例それでは、currentTargetイベントプロパティを使った具体的なコード例を見てみましょう。コード<!DOCTYPE html> <html> <body>

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

    HTML DOM DragEventとはHTML DOM DragEvent(ドラッグイベント)は、選択されたテキストや要素がドラッグ&ドロップされる際に実行されるイベントの一種です。このイベントはHTML5で新たに導入され、直感的なドラッグ&ドロップ操作を実装するために広く利用されています。プロパティHTML DOM DragEventには、以下のプロパティが用意されています。プロパティ説明dataTransferユーザーがドラッグまたはドロップしているデータを返します。構文DragEventの基本的な構文は以下のとおりです。Object.DragEventType= function_na