SYNCERのロゴ
アイキャッチ画像

draggable属性 - ドラッグ操作

draggable属性は、要素をドラッグ操作で動かせるか否か、設定するための属性です。画像やテキストに適用できます。

概要

DOM Interface
HTMLElement.draggable
仕様書
https://html.spec.whatwg.org/multipage/dnd.html#the-draggable-attribute

列挙属性で、下記のキーワードから値を指定して下さい。

true
ドラッグ操作が有効。
false
ドラッグ操作が無効。
auto
ドラッグ操作の有効、無効をブラウザに任せる。

デモ

draggable属性のデモです。一番下はfalseを指定したのでドラッグ操作できません。

<!-- このコードは編集できます。 -->

<p><img id="hoge" src="./image.png" width="150" height="150" draggable="true"></p>
<p><img id="hoge" src="./image.png" width="150" height="150" draggable="auto"></p>
<p><img id="hoge" src="./image.png" width="150" height="150" draggable="false"></p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
5.1+ 10+ 12+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。