これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
draggable グローバル属性は、Drag and Drop API を使用して要素をドラッグすることが可能かを示す列挙型属性です。以下の値を使用できます:
true: 要素がドラッグ可能であることを示すfalse: 要素はドラッグ不可であることを示す
この属性を設定しない場合のデフォルト値は auto であり、ブラウザで定義された既定の動作になります。
この属性は列挙型であり、論理型ではありません。これは値 true または false のいずれかを明示的に使用することが必須であり、<label draggable>Example Label</label> といった省略形は認められないということです。正しい使用法は <label draggable="true">Example Label</label> です。
デフォルトでは選択テキスト、画像、リンクのみドラッグ可能です。その他すべての要素ではこちらの包括的なサンプルで示しているように、ドラッグアンドドロップの仕組みを動作させるために ondragstart イベントを設定しなければなりません。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard draggable の定義 |
現行の標準 | 最新のスナップショットである HTML5.1 から変更なし。 |
| HTML5.1 draggable の定義 |
草案 | WHATWG HTML Living Standard のスナップショットであり、この属性を初めて定義しました。 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有) | 2.0 (1.8.1) | (有) | (有) | (有) |
| 機能 | Android | Android 版 Chrome | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | 1.0 (1.8.1) | (有) | (有) | (有) |
関連情報
- すべてのグローバル属性。