Clever Geek Handbook

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

It seems that the input element loses a lot of functionality when placed on an element with draggable = "true". It looks like firefox.

See my jsfiddle: http://jsfiddle.net/WC9Fe/3/

Html:

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

JS:

$('#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){
    e.preventDefault();
});
drop.on('dragenter', function(e){
    e.preventDefault();
});
drop.on('drop', function(e){
    alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
    e.preventDefault();
});

Now try selecting text in the input file using firefox. Seems impossible. Try the same in IE / Chrome. Everything seems to be working fine.

+11


source to share


4 answers


As far as I know, this is a known bug in FF. A quick (and dirty) workaround would be to remove the attribute draggable

on typing focus

, add it again to the text event, blur

and disable the text selection on the #drag div to enable dragging as soon as you click outside of the focused input (by clicking directly on the #div) ...

Updated script 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 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 this helps you.

+12


source


See Firefox bug .

Alternatively, setting draggable = "false" on the input focus event and replacing draggable = "true" with the blur input event fires.

See jsfiddle for an example without any frameworks.

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");
}
+5


source


I used the onMouseEnter and onMouseLeave functions on the textarea to set the div only being dragged when the mouse is outside the textarea.

I did this because I needed focus to stay in edit fields while dragging and dropping does not fire the focus event.

0


source


I also found that using onmouseenter and onmouseleave to toggle the draggable attribute works better because it puts the cursor in the input field where you actually click. When using onfocus / onblur, the cursor always goes to the beginning or end of the text, even if you click in the middle.

0


source






More articles:


All Articles