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

HTML5のdraggable属性でドラッグ可能な段落を作成する方法

HTML5では、draggable属性を使用することで、段落（<p>要素）などを簡単にドラッグ可能にできます。この属性の値をtrueに設定すればドラッグが有効になり、falseに設定すれば無効になります。

draggable属性の基本

draggable属性は、画像やリンク以外の要素をデフォルトではドラッグできないため、それらをドラッグ操作の対象にしたい場合に使用します。値には以下の3つを指定できます。

  • true … 要素のドラッグを有効にする
  • false … 要素のドラッグを無効にする
  • auto … ブラウザのデフォルト動作に従う

実装例

次のコードを実行すると、draggable要素を実装し、実際に段落をドラッグ＆ドロップできます。左側のボックスから右側へ、または右側から左側へ段落を移動してみてください。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         .drag {
            float: left;
            width: 100px;
            height: 75px;
            border: 1px 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">This is demo paragraph to be dragged!</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イベント：ドラッグ開始時に発生し、dataTransfer.setData()メソッドでドラッグする要素のIDを保存します。
  • dragイベント：ドラッグ中に継続的に発生し、ここではステータス表示用のボックスにメッセージを出力しています。
  • dragoverイベント：ドロップ対象の上で要素がドラッグされている間に発生します。デフォルトの挙動ではドロップが禁止されているため、event.preventDefault()を呼び出してドロップを許可します。
  • dropイベント：要素がドロップされたときに発生し、dataTransfer.getData()で保存したIDを取得して、その要素をドロップ先に移動（appendChild）させます。

このように、draggable属性とJavaScriptのドラッグ関連イベントを組み合わせることで、ブラウザ標準の機能だけで直感的なドラッグ＆ドロップUIを実現できます。リストの並べ替えやカードの移動など、さまざまな場面で応用できるので、ぜひ試してみてください。

  1. HTMLのonwheelイベント属性とは？使い方とサンプルコードをわかりやすく解説

    onwheelイベント属性は、ユーザーがHTML要素の上でマウスホイールを上下に動かしたときに発生し、指定されたスクリプト（JavaScript）を実行します。本記事では、HTMLドキュメントにおけるonwheelイベント属性の基本的な使い方を、サンプルコードと実行結果つきでわかりやすく解説します。 構文 onwheelイベント属性の基本的な記述方法は以下の通りです。 <tagname onwheel="script">コンテンツ</tagname> それでは、HTMLのonwheelイベント属性の具体的な使用例を見ていきましょう。 使用例 以下のサ

  2. HTMLのonscrollイベント属性とは？使い方とサンプルコードを解説

    HTMLのonscrollイベント属性は、HTMLドキュメント内でスクロールバーを使ってHTML要素がスクロールされたときに発火するイベント属性です。ユーザーがスクロール操作を行ったタイミングでJavaScriptを実行したい場合に活用できます。構文onscrollイベント属性の基本的な構文は以下のとおりです。<tagname onscroll="script"></tagname>onscroll属性には、スクロール時に実行したいJavaScriptのコードまたは関数名を指定します。divやpなど、overflowプロパティでスクロール可能に設定さ