HTML | draggable属性の使い方、ドラッグを有効または無効にする方法など
HTMLのグローバル属性「draggable」を使って要素のドラッグを有効または無効に設定する方法やデフォルト値、JavaScriptやjQueryで切り替える方法を紹介しています。
HTML要素のドラッグを有効または無効にする
HTMLで要素のドラッグを有効または無効にするには draggable 属性 を true または false で指定します。
draggableの値は省略できません。
<p draggable="true">TRUE</p>
<p draggable="false">FLASE</p>上記HTMLをブラウザで実行すると以下のような状態になります。
TRUE
FLASE
draggable属性のデフォルト値
HTML要素の種類によってdraggable属性はデフォルトで有効なもの、そうでないものが存在します。
多くの要素ではデフォルト値は無効となっていますが、例えばaタグやimgタグなどはデフォルトで有効になっており、ユーザーが表示している画像やリンクをデスクトップにドラッグする事が可能です。
aタグをデフォルトの状態と無効にしたものを並べてみます。
有効：カラフルな爆発エフェクトのCSSアニメーションサンプル | ONE NOTES
無効：カラフルな爆発エフェクトのCSSアニメーションサンプル | ONE NOTES
と、aタグのドラッグに対する挙動が変わっている事が確認できます。
JavaScriptやjQueryで切り替える
draggable属性は、JavaScriptやjQueryで動的に切り替える事が可能です。
JavaScriptで切り替えるには setAttribute('draggable’, false)で有効化、removeAttribute('dragable’) で無効化する事が可能です。
jQuery（jQuery UI）の場合は draggable() が利用可能です。
CSSでドラッグ中のスタイルを指定する
CSSでドラッグ中のスタイルを変更する事が可能です。（勿論、JavaScriptでも可能ですが。）
CSSでドラッグ中のスタイルを変更するには疑似クラス、:active を利用します。
:active はボタンを押している時などに対してもスタイルを適用可能な疑似クラスです。
ドラッグ中専用ではないのでセレクタの指定には注意して下さい。
div:active {
background: #000;
}