Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop

Question

It seems that an input element loses a lot of functionality when put into an element with draggable=\"true\". This only seems to occur in firefox.

See my jsfiddle: h

Answer 1

See Firefox defect.

As an alternative, setting the draggable="false" on input focus event and replacing back to draggable="true" on input blur event works.

See jsfiddle for an example without any framework.

HTML:

    Inside draggable (FIXED)

JS:

onFocus= function(e) {
    document.getElementById("draggableDiv").setAttribute("draggable", "false");
}
onBlur= function(e) {
    document.getElementById("draggableDiv").setAttribute("draggable", "true");
}