HTML5: Can't drag on-the-fly created <div> tag even though draggable='true' Do I need to "BLESS" it or something?

Question

After creating a div on the fly with this markup:

$('.circuit').prepend("<div class='component' draggable='true'>TRANSISTOR</div>");

It is NOT draggable itself :(

Is jQuery prepend() the correct way to create "live" tags in the DOM?

Do I need to somehow bless it a different way to make draggable=true really work?

How to I wire it up so that on-the-fly divs can be draggable?

AFTER NOTE: I added a static div and that is draggable. INTERESTING: I view both the static and dynamic using FireFox F12 Firebug and they are identical. But one is draggable and one is not!!!

Answer 1

If it's not in markup when the page is rendered, the browser is't binding them based just off having the attribute (when created dynamically) quite yet (maybe in future releases this will happen). For now, you need to rig up these events manually when creating a draggable element on the fly.

See here for how to do it using jQuery & FireFox: HTML5 drag and drop in Firefox 3.5