【HTML Living Standard】draggable属性の使い方
draggable属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
draggableプロパティは、HTML要素がユーザーによってドラッグ可能であるかどうかを示すグローバル属性の状態を保持するプロパティです。この属性はすべてのHTML要素に適用でき、ユーザーインターフェースにおいて、要素をマウスやタッチ操作で移動させたり、別の場所へドロップしたりする機能を実現するために利用されます。
設定できる値は、true、false、autoの三種類があります。trueを設定すると、そのHTML要素はドラッグ可能となり、ユーザーが要素を掴んで移動できるようになります。例えば、リストアイテムの並べ替えや、ファイルをアップロードエリアにドラッグ＆ドロップする際にこの設定が活用されます。falseを設定した場合、要素はドラッグ不可能となり、ユーザーが要素をドラッグしようとしても何も起こりません。autoは、要素のデフォルトの動作に依存します。例えば、画像やリンク要素は既定でドラッグ可能ですが、それ以外の要素は既定でドラッグ不可能であるため、autoはそれぞれの要素の元々の挙動に従います。
このdraggable属性をtrueに設定するだけでは、ドラッグアンドドロップ機能の全てが実現されるわけではありません。ドラッグが開始された際にどのようなデータを転送するか、またドロップされた場所でどのような処理を行うかといった具体的な動作は、JavaScriptのDrag and Drop API（例：ondragstart、ondragover、ondropなどのイベント）を用いて別途実装する必要があります。この属性は、ドラッグアンドドロップ機能を実現するための重要な「入り口」となる役割を担っています。
構文(syntax)
1<div draggable="true">ドラッグ可能な要素</div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML draggable属性でdiv要素をドラッグ可能にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>draggable 属性のサンプル</title> 7 <style> 8 /* すべてのボックスに共通のスタイル */ 9 div { 10 width: 200px; 11 height: 100px; 12 border: 2px solid #ccc; 13 margin: 10px; 14 padding: 10px; 15 text-align: center; 16 line-height: 100px; /* テキストを垂直方向に中央揃え */ 17 font-family: sans-serif; 18 font-size: 1.1em; 19 user-select: none; /* テキスト選択を防止 */ 20 } 21 22 /* draggable="true" の要素のスタイル */ 23 div[draggable="true"] { 24 background-color: #e0ffe0; /* 薄い緑色 */ 25 border-color: #4CAF50; /* 緑色の枠線 */ 26 cursor: grab; /* ドラッグ可能なカーソル */ 27 } 28 29 /* draggable="true" の要素がアクティブなときのスタイル（ドラッグ中） */ 30 div[draggable="true"]:active { 31 cursor: grabbing; /* ドラッグ中のカーソル */ 32 } 33 34 /* draggable="false" の要素のスタイル */ 35 div[draggable="false"] { 36 background-color: #ffe0e0; /* 薄い赤色 */ 37 border-color: #F44336; /* 赤色の枠線 */ 38 cursor: not-allowed; /* ドラッグ不可能なカーソル */ 39 } 40 41 /* draggable 属性が指定されていない要素のスタイル (auto相当) */ 42 div:not([draggable]) { 43 background-color: #e0e0ff; /* 薄い青色 */ 44 border-color: #2196F3; /* 青色の枠線 */ 45 cursor: default; /* デフォルトのカーソル */ 46 } 47 </style> 48</head> 49<body> 50 <h1><code>draggable</code> 属性の例</h1> 51 <p>以下のボックスをマウスでドラッグしてみてください。</p> 52 53 <!-- draggable="true" を指定した要素：ドラッグ可能になります --> 54 <div draggable="true"> 55 ドラッグ可能 (draggable="true") 56 </div> 57 58 <!-- draggable="false" を指定した要素：ドラッグ不可能になります --> 59 <div draggable="false"> 60 ドラッグ不可能 (draggable="false") 61 </div> 62 63 <!-- draggable 属性を指定しない要素：ブラウザのデフォルト動作 (通常はドラッグ不可能) --> 64 <div> 65 デフォルト (draggableなし) 66 </div> 67</body> 68</html>
HTMLのdraggable属性は、Webページ上のHTML要素がユーザーによってドラッグ可能かどうかを制御するためのグローバル属性です。この属性は、引数や戻り値を持たず、要素に直接指定することでその振る舞いを定義します。
draggable属性には主に三つの状態があります。draggable="true"を指定すると、そのHTML要素はユーザーがマウスでドラッグできるようになります。これは、要素の順序を入れ替えたり、特定の領域に要素をドロップさせたりする機能を実現する際に利用されます。
逆に、draggable="false"を指定した場合、その要素はドラッグ不可能となり、ユーザーがマウス操作で動かすことはできません。そして、draggable属性を全く指定しない場合（またはdraggable="auto"と指定した場合）は、ブラウザのデフォルトの動作に従います。通常、画像やリンク以外の一般的な要素、例えばdiv要素などは、デフォルトではドラッグ不可能として扱われます。
このサンプルコードでは、三つのdiv要素を使ってdraggable属性の挙動を示しています。一つ目のdivにはdraggable="true"が指定されており、緑色の枠線で表示されドラッグ可能です。二つ目のdivにはdraggable="false"が指定され、赤色の枠線で表示されドラッグできません。最後のdivはdraggable属性が指定されておらず、青色の枠線で表示され、ブラウザのデフォルトの動作（ドラッグ不可能）に従います。このようにdraggable属性を活用することで、Webアプリケーションにおけるユーザーインターフェースの操作性を向上させることができます。
HTMLのdraggable属性は、要素をドラッグ可能にするか否かを制御します。draggable="true"を指定すると要素がドラッグ可能に、draggable="false"を指定するとドラッグ不可能になります。属性を省略した場合、ブラウザのデフォルト挙動に従いますが、これは通常ドラッグ不可です（ただし、画像やリンクなどの一部要素はデフォルトでドラッグ可能です）。
この属性は要素を「ドラッグ可能」にする機能を提供するだけです。実際にドラッグした要素を別の場所にドロップして移動させたり、ファイルをアップロードしたりといった複雑な処理を実現するには、dragstart、dragover、dropといったJavaScriptのイベントリスナーを組み合わせて実装する必要があります。サンプルコード内のCSSは、ドラッグ可能状態を視覚的に分かりやすくするためのものであり、draggable属性自体の機能とは別である点にご留意ください。
HTMLテーブルでdraggable属性を使いドラッグ可能にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML draggable属性のテーブルでの使用例</title> 7 <style> 8 /* テーブルの基本的なスタイル設定 */ 9 table { 10 width: 80%; 11 border-collapse: collapse; 12 margin: 20px auto; 13 } 14 th, td { 15 border: 1px solid #ddd; 16 padding: 8px; 17 text-align: left; 18 } 19 th { 20 background-color: #f2f2f2; 21 } 22 /* draggable="true"が設定された行に視覚的なヒントを適用 */ 23 tr[draggable="true"] { 24 cursor: grab; /* ドラッグ可能なことを示すカーソル */ 25 background-color: #e0f2f7; /* ドラッグ可能行の背景色 */ 26 } 27 </style> 28</head> 29<body> 30 <!-- 以下のテーブルの行（<tr>要素）にdraggable="true"属性が設定されています。 --> 31 <!-- この属性により、ブラウザはこれらの行がドラッグ可能であることを認識します。 --> 32 <!-- 実際に要素の移動やドラッグ＆ドロップイベントを処理するには、JavaScriptが必要です。 --> 33 <table> 34 <thead> 35 <tr> 36 <th>ID</th> 37 <th>アイテム名</th> 38 <th>状態</th> 39 </tr> 40 </thead> 41 <tbody> 42 <!-- この行はdraggable="true"が設定されているため、ドラッグ可能です。 --> 43 <tr draggable="true"> 44 <td>1</td> 45 <td>リンゴ</td> 46 <td>在庫あり</td> 47 </tr> 48 <!-- この行もdraggable="true"が設定されているため、ドラッグ可能です。 --> 49 <tr draggable="true"> 50 <td>2</td> 51 <td>バナナ</td> 52 <td>販売中</td> 53 </tr> 54 <!-- この行はdraggable="true"が設定されていないため、ドラッグできません。 --> 55 <tr> 56 <td>3</td> 57 <td>オレンジ</td> 58 <td>品切れ</td> 59 </tr> 60 <!-- この行はdraggable="true"が設定されているため、ドラッグ可能です。 --> 61 <tr draggable="true"> 62 <td>4</td> 63 <td>ブドウ</td> 64 <td>予約可能</td> 65 </tr> 66 </tbody> 67 </table> 68</body> 69</html>
HTMLのdraggable属性は、ウェブページ上の任意の要素をブラウザ上でドラッグ可能にするためのグローバル属性です。この属性は引数を取らず、特定の戻り値も持ちません。要素にdraggable="true"と設定することで、その要素をマウスなどで掴んで移動させられるようになります。
提供されたサンプルコードでは、テーブルの行（<tr>要素）に対してdraggable属性が使用されています。IDが1, 2, 4の行にはdraggable="true"が設定されており、これらの行はドラッグ可能です。一方、IDが3の行にはdraggable属性が設定されていないため、ドラッグできません。
コード内のCSSセクションでは、draggable="true"が設定された行の見た目を変更しています。具体的には、カーソルを掴むようなアイコン（grab）に変更し、背景色を水色にすることで、どの行がドラッグ可能であるかをユーザーに視覚的に伝えています。
しかし、draggable属性は要素を「ドラッグ可能」にするだけで、実際にドラッグした要素を別の場所へ移動させたり、特定の領域にドロップした際に処理を実行したりする機能は提供しません。これらのインタラクティブな動作を実装するには、JavaScriptを用いてドラッグ＆ドロップに関するイベント（dragstart, dragover, dropなど）を処理する必要があります。この属性は、ドラッグ＆ドロップ機能の土台を作る役割を担っています。
draggable属性は、その要素がドラッグ可能であることをブラウザに伝える設定であり、実際に要素が移動するわけではありません。サンプルコードのようにdraggable="true"を設定しただけでは、ドラッグ開始の合図をブラウザに送るに留まります。要素の移動や並び替え、ドロップされた際のデータ処理といった具体的なドラッグ＆ドロップ機能を実装するには、JavaScriptを用いてdragstart、dragover、dropといったイベントを適切に処理する必要があります。CSSでcursor: grab;などを設定すると、ユーザーにドラッグ可能であることを視覚的に伝えられ、使いやすさが向上します。この属性はグローバル属性として様々なHTML要素に適用できますが、テーブルの行に適用する際は、JavaScriptでの詳細な動作設計が不可欠です。アクセシビリティへの配慮も忘れずに行うようにしましょう。