HTMLリファレンスマニュアル

HTMLタグ全般

HTMLのdraggable属性

グローバル属性draggableは、要素がドラッグ＆ドロップ操作APIでドラッグが許可されているかどうかを示すエンümクロス型の属性です。

draggableの値は以下の通りです：
　　　 trueの場合、要素はドラッグ可能です
　　　 falseの場合、要素はドラッグ不可です
この属性に値が設定されていない場合、デフォルト値はautoであり、ブラウザが定義するデフォルト動作を使用します。
この属性は列挙型であり、ボルン型ではありません。これは、trueまたはfalseの値を明示的に指定する必要があることを意味します。例：<label draggable>Example Label</label> という短縮形は認められません。正しい使い方は <label draggable="true">Example Label</label>。
デフォルトでは、選択されたテキスト、画像、リンクのみがドラッグ可能です。他の要素は、正常に動作するために、ondragstartイベントの順序を設定する必要があります

HTML 全局属性

オンラインサンプル

サンプルでは、ドラッグ可能な段落を示しています：

サンプル

!DOCTYPE　HTML>
<html>
<head>
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>
<style　type="text/css">
#div1　{width:400px;height:80px;padding:10px;border:1px　solid　red;}
</style>
<script　type="text/javascript">
function　allowDrop(ev)
{
　　　　ev.preventDefault();
}
function　drag(ev)
{
　　　　ev.dataTransfer.setData("Text",ev.target.id);
}
function　drop(ev)
{
　　　　var　data=ev.dataTransfer.getData("Text");
　　　　ev.target.appendChild(document.getElementById(data));
　　　　ev.preventDefault();
}
</script>
</head>
<body>
<div　id="div1"　ondrop="drop(event)"　ondragover="allowDrop(event)"></div>
<br　/>
<p　id="drag1"　draggable="true"　ondragstart="drag(event)">これは移動可能な段落です。この段落を上の赤い矩形ボックスにドラッグしてください。</p>
</body>
</html>

テストをしてみる‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox、Opera、 Chrome、Safariブラウザがdraggable属性をサポートしています。

注意： Internet Explorer 8 およびより古いIEバージョンではdraggable属性をサポートしていません。

定義と使用法

draggable属性は要素がドラッグ可能かどうかを指定します。
ヒント：リンクと画像はデフォルトでドラッグ可能です。
ヒント： draggable属性は通常、ドラッグ＆ドロップ操作で使用されます。

HTML 4.01 と HTML5の違い

draggable 属性は HTML5 新しい機能

構文

　　　　 <element draggable="true|false|auto">

属性値

値	説明
true	要素はドラッグ可能と指定されています。
false	要素はドラッグ不可と指定されています。
auto	ブラウザのデフォルト機能を使用してください。

HTML 全局属性

HTML: <template> タグ