【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)
戻り値なし
戻り値はありません