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>