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

As far as I know this is a known bug in FF. A quick (and "dirty" workaround) would be to remove the draggable attribute on text input focus event, add it again on text input blur event, and disable text selection on #drag div to enable dragging once you clicked outside the focused input (clicking on #div directly).

Updated fiddle here.

Sample code:

JS:

$('#message')
    .on('focus', function(e) {
        $(this).closest('#drag').attr("draggable", false);
    })
    .on('blur', function(e) {
        $(this).closest('#drag').attr("draggable", true);
    });

CSS:

.disable-selection {
    /* event if these are not necessary, let's just add them */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* this will add drag availability once you clicked the 
       #drag div while you're focusing #message div */
    -moz-user-select: none;
}

Hope it could help you.

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:

<div draggable="true" id="draggableDiv">
    <textarea onfocus="onFocus();" onblur="onBlur();">Inside draggable (FIXED)</textarea>
</div>

JS:

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