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）。

更新了小提琴here。

示例代码：

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 defect。

作为替代方案，设置draggable =＆＃34; false＆＃34;关于输入焦点事件并替换回draggable =＆＃34; true＆＃34;输入模糊事件有效。

有关没有任何框架的示例，请参阅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");
}

Answer 3

我在textarea上使用了onMouseEnter和onMouseLeave函数，只有在鼠标位于textarea之外时才设置div draggable。

我这样做是因为我需要将焦点留在编辑字段中，而拖动和拖动本身不会触发焦点事件。

Answer 4

我还发现使用onmouseenter和onmouseleave切换draggable属性效果更好，因为它将光标放在实际单击的输入框中。使用onfocus / onblur时，即使您在中间单击，光标也始终会转到文本的开头或结尾。

Answer 5

如果您像我一样遇到此问题，并且正在使用Sortable.js，则可以使用filter选项来指定不会触发拖动的元素，从而使输入正常运行。

jQuery：

$('#my-sortable').sortable({
    filter: ".my-text-input",   // Or whatever class you specify
    preventOnFilter: false      // Allow the input to operate normally
});

您还可以从此处的Sortable.js选项列表中找到此信息： https://github.com/SortableJS/sortablejs

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

5 个答案: