[HTML5]標準draggableについて

HTML5のdraggable属性

html5の標準機能でDOMをドラッグ&ドロップできるのを初めて知りました。主要ブラウザでは既にサポートされているようです。

HTMLサンプル

html

<div draggable="true">draggable</div>

draggable="true"とするだけでその要素をドラッグできるようになります。
但し、一部のブラウザではこれだけでは機能しないようです。
有名なところでFireFoxでは動きません(恐らくMozillaの派生ブラウザも)。
FireFoxの場合、JavaScriptでondragstartイベントに登録する必要があります。

選択中のテキスト、href属性が指定されたa要素、src属性が指定されたimg要素は、デフォルトでdraggable=trueとなっています。

ForFireFox

<div draggable="true" ondragstart="event.dataTransfer.setData('text', '今日も一日がんばるぞい')">
  今日も一日がんばるぞい
</div>

ドラッグ操作

dataTransferとは？

DataTransferオブジェクトは、ドラッグ＆ドロップ操作の実行中、ドラッグされているデータを保持するために使われます。データトランスファーは1つ以上の項目を保持し、それぞれの項目は1つ以上のデータ型を保持します。

連想配列のDTOです。キーとバリューをセットします。使用できるキーは決まりがあり、text、text/plain、text/htmlのどれかです。ですがブラウザによってバラバラです。例えば、FireFoxとChromは「myKey」とか任意の名前でできました。逆にIE11だとtext以外動きませんでした。