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

HTMLElement.draggable - グローバル属性のdraggable属性

draggableは、HTMLElementのプロパティです。HTMLのグローバル属性であるdraggable属性を反映します。

概要

名前
draggable
所属
HTMLElement
IDL
[CEReactions] attribute boolean draggable;
仕様書
https://html.spec.whatwg.org/multipage/dnd.html#dom-draggable

説明

このプロパティはHTMLを反映しています。値についての説明はdraggable属性の項目をご参考下さい。

チュートリアル

取得、代入、どちらもできます。論理属性なので、値は真偽値で取り扱います。

HTML

<img id="hoge" src="./image.png" draggable="true">

JavaScript

// HTMLElementを取得
var element = document.getElementById( "hoge" ) ;

取得

var value = element.draggable ;	// true

代入

element.draggable = false ;	// <img id="hoge" src="./image.png" draggable="false">

デモ

HTMLElement.draggableのデモです。falseを代入すると、ドラッグできなくなります。

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

<!DOCTYPE html>
<html>
<body>
<img id="hoge" src="./image.png" width="200" height="200" draggable="true">
<hr>
<script>
var element = document.getElementById( "hoge" ) ;

// 代入
// element.draggable = false ;

// 取得
console.log( element.draggable ) ;
document.body.appendChild( new Text( element.draggable ) ) ;
</script>
</body>
</html>

サポート状況

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

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