SYNCER

SYNCER

draggable属性 - ドラッグ操作

公開日:

draggable属性は、要素をドラッグ操作で動かせるか否か、設定するための属性です。

説明

draggable属性は、要素に対するドラッグ操作を制御します。列挙属性で、下記のキーワードから値を指定して下さい。画像だけでなく、テキストにも適用できます。

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

HTML

<p draggable="true">このテキストはドラッグできます。</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】draggable属性 - ドラッグ操作</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/draggable/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>draggable属性は、要素に対するドラッグ操作を制御するための属性です。</p>

<h2>draggable=true</h2>
<p><img src="/image/mascot/200.png" alt="ドラッグできる画像" draggable="true"></p>
<p draggable="true">このテキストはドラッグ操作できます。</p>

<h2>draggable=false</h2>
<p><img src="/image/mascot/200.png" alt="ドラッグできない画像" draggable="false"></p>
<p draggable="false">このテキストはドラッグ操作できません。</p>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>