グローバル属性~“draggable”属性

“draggable”属性について

“draggable”属性は要素がドラッグ可能かを指定する属性です。

“draggable”属性を使用すると通常はドラッグできない要素をドラッグ可能にしたり、通常はドラッグできる要素をドラッグ不可にしたりすることができます。

“draggable”属性の設定状態は“true”、“false”、“auto”の3つあります。

“true”の場合は要素はドラッグ可能、“false”の場合は要素はドラッグ不可となります。それぞれ“draggable”属性の値として“true”と“false”を指定することで設定することができます。

“auto”は既定の状態で、“img”要素、画像を埋め込む“object”要素、“href”属性を指定した“a”要素はドラッグ可能(“true”の状態)、それ以外の要素はドラッグ不可(“false”の状態)となります。

“draggable”属性の値として“auto”は定義されていませんが、“draggable”属性を指定しない場合、もしくは値が無効か不在の場合に“auto”の状態となります。

指定できる値

サンプルコード

“draggable="true"”

<div draggable="true">

<p>うつくしきもの。瓜に描きたるちごの顔。すずめの子の、ねず鳴きするに踊り来る。二つ三つばかりなるちごの、急ぎて這ひくる道に、いと小さき塵のありけるを、目ざとに見つけて、いとをかしげなる指にとらへて、大人ごとに見せたる、いとうつくし。</p>

</div>

うつくしきもの。瓜に描きたるちごの顔。すずめの子の、ねず鳴きするに踊り来る。二つ三つばかりなるちごの、急ぎて這ひくる道に、いと小さき塵のありけるを、目ざとに見つけて、いとをかしげなる指にとらへて、大人ごとに見せたる、いとうつくし。

“draggable="false"”

<div draggable="false">

<p>うつくしきもの。瓜に描きたるちごの顔。すずめの子の、ねず鳴きするに踊り来る。二つ三つばかりなるちごの、急ぎて這ひくる道に、いと小さき塵のありけるを、目ざとに見つけて、いとをかしげなる指にとらへて、大人ごとに見せたる、いとうつくし。</p>

</div>

うつくしきもの。瓜に描きたるちごの顔。すずめの子の、ねず鳴きするに踊り来る。二つ三つばかりなるちごの、急ぎて這ひくる道に、いと小さき塵のありけるを、目ざとに見つけて、いとをかしげなる指にとらへて、大人ごとに見せたる、いとうつくし。