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

Question

似乎将 input 元素放入带有 draggable="true" 的元素时会失去很多功能。 这似乎只发生在 Firefox 中。

看我的 jsfiddle： http : //jsfiddle.net/WC9Fe/3/

网址：

<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 中的一个已知错误。 一个快速（和“脏”的解决方法）是删除文本输入focus事件上的draggable属性，在文本输入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");
}

Answer 3

我在 textarea 上使用 onMouseEnter 和 onMouseLeave 函数来设置 div 仅当鼠标在 textarea 之外时可拖动。

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

Answer 4

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

Answer 5

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

查询：

$('#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