HTML5 and Drag And Drop is every thing else than intuitive. All implementations suffer from nasty bugs. Here are some impression from quirksmode.org on HTML5 and Drag'n'Drop
If you embed in Firefox an "editable" element like "INPUT" or "TEXTAREA" into a a "draggable" element things are getting strange.
Just take the following snipplet...
<div> <input/> </div>
... add the draggable="true" attribute...
<div draggable="true"> <input/> </div>
... The try to select text with your mouse in the input box. An you will notice it does not work.
It seems to me draggable event override classic mouse click events. So the solution to this is pretty simple. When you mouse over an editable element, remove all draggable attributes and add them again when the mouse exits.
The following code uses jQuery to illustrate this workaround:
$(document).ready(function() { // A container containing all the editable and draggable elements $("#divOutput").mouseover(function(ev) { switch (ev.target.nodeName) { case "INPUT": case "TEXTAREA" : $("[draggable=true]").attr("draggable","false"); break; default: $("[draggable=false]").attr("draggable","true"); } });