nicojs nicojs - 1 year ago 150
Javascript Question

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

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:


<div id="drag" draggable="true">
Drag this div <br />
<input id="message" type="text" />
<div id="drop">
Drop area


$('#drag').on('dragstart', function(e){
e.originalEvent.dataTransfer.setData('Text', $('#message').val());
e.originalEvent.dataTransfer.effectAllowed = 'move';

var drop = $('#drop');
drop.on('dragover', function(e){
drop.on('dragenter', function(e){
drop.on('drop', function(e){
alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));

Now try to select text in the input using firefox. Seems impossible. Try the same in IE/Chrome. Seems to work just fine.

Answer Source

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:


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


.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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download