使用HTML5拖放操作阻止拖动事件干扰Firefox中的输入元素

Question

当放入具有draggable ="true"的元素时,输入元素似乎失去了很多功能.这似乎只发生在Firefox中.

看我的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();
});

现在尝试使用firefox在输入中选择文本.似乎不可能.在IE/Chrome中尝试相同的操作.似乎工作得很好.

Answer 1

据我所知,这是FF中的已知错误.一个快速(和" 脏 "的解决方法)是删除draggable文本输入focus事件的属性,在文本输入事件上再次添加它blur,并禁用#drag div上的文本选择,以便在焦点输入外单击后启用拖动(单击# div直接).

这里更新了小提琴.

示例代码:

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;
}

希望它可以帮到你.

Answer 2

查看Firefox 缺陷.

作为替代方案,在输入焦点事件上设置draggable ="false"并在输入模糊事件上替换回draggable ="true".

有关没有任何框架的示例,请参阅jsfiddle.

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