draggable - ドラッグ可能か否かを指定する

draggableは、要素がドラッグ可能か否かを指定する属性です。trueを指定した場合はドラッグ可能、falseを指定した場合はドラッグ不可能になります。この属性は、JavaScriptでドラッグした後のイベントを設定しないと実質的に意味がありませんが、JavaScriptなしでも挙動を確かめることはできます。

説明

下記はp要素にdraggable属性を指定した例です。trueを指定した「おはよう」というp要素はドラッグできますが、falseを指定した「こんにちは」というp要素はドラッグできません。ドラッグした時に、要素をそのまま運べるかを確認してみて下さいね。

HTML

<p draggable="true">おはよう</p>
<p draggable="false">こんにちは</p>

おはよう

こんにちは

同じように、img要素に指定した例が下記です。ドラッグした時に、画像を運べるか確認してみて下さいね。

HTML

<p><img src="author.png" draggable="true"> trueを指定したimg要素</p>
<p><img src="author.png" draggable="false"> falseを指定したimg要素</p>

trueを指定したimg要素

falseを指定したimg要素

JavaScriptでイベントを指定する

とても簡単に例を説明します。JavaScriptでは、ドラッグはondrag、ドロップはondrop、ドラッグ状態でのホバーはondragoverというイベントハンドラが用意されています。下記は、ドラッグ&ドロップをした時にアラートを表示する例です。画像を、下の茶色いエリアにドラッグ&ドロップしてみて下さい。

HTML

<p><img src="author.png" draggable="true"></p>
<div ondrop="drop(event)" ondragover="dragover(event)">please drop here!</div>

JavaScript

// ドラッグ状態でホバーした時
function dragover(e) {
	var e = e || window.event ;
	e.preventDefault() ;
}

// ドロップした時
function drop(e) {
	var e = e || window.event ;
	e.preventDefault() ;

	alert( "ドロップ成功です!!" ) ;
}

please drop here!

参考情報

draggable属性に関する情報は、下記ページで確認できます。

  • W3C … W3Cによる勧告案。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。