draggable=""

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O

draggable属性は、その要素がドラッグ可能かどうかを指定します。

  • この属性はHTML 5.1で追加されました。

<img src="sample.gif" alt="SAMPLE" draggable="false" title="ドラッグ不可">
属性 値
グローバル属性
draggable="" ドラッグが可能かどうか true ドラッグ可能
false ドラッグ不可

この属性を省略した場合は、ブラウザ側のデフォルトの挙動が使用されます。

  • 一般的には、選択されたテキスト、img要素、href属性が指定されたa要素がドラッグ可能になり、それ以外の要素はドラッグ不可になるようです。

title属性の指定

HTML 5.1の仕様書では、draggable属性を持つ要素は、非視覚的なやりとりのためにtitle属性で名付けるべきとしています。

  • これは、その要素がドラッグ可能であるかどうかを、title属性を使って識別できるようにしておくという意味になるかと思います。

指定できる要素

draggable属性はグローバル属性のため、HTML5の全ての要素に指定することができます。

使用例


<p><img src="sample.gif" alt="SAMPLE"> 一般的にはドラッグ可能</p>
<p><img src="sample.gif" alt="SAMPLE" draggable="false" title="ドラッグ不可"> ドラッグ不可</p>

<p>一般的にはドラッグ不可</p>
<p draggable="true" title="ドラッグ可能">ドラッグ可能</p>
表示例

SAMPLE 一般的にはドラッグ可能

SAMPLE ドラッグ不可

一般的にはドラッグ不可

ドラッグ可能

  • Firefox（50）では、うまく動作しないケースがあるようです。（上記の場合、p要素に指定した draggable="true" が機能しないようです）