javascript 使用 HTML5 拖放防止拖动事件干扰 Firefox 中的输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21680363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop
提问by nicojs
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.
似乎将 input 元素放入带有 draggable="true" 的元素时会失去很多功能。这似乎只发生在 Firefox 中。
See my jsfiddle: http://jsfiddle.net/WC9Fe/3/
看我的 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:
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 to select text in the input using firefox. Seems impossible. Try the same in IE/Chrome. Seems to work just fine.
现在尝试使用 Firefox 在输入中选择文本。似乎不可能。在 IE/Chrome 中尝试相同的方法。似乎工作得很好。
回答by Nicolae Olariu
As far as I know this is a known bug in FF. A quick (and "dirty" workaround) would be to remove the draggableattribute on text input focusevent, add it again on text input blurevent, and disable text selection on #drag div to enable dragging once you clicked outside the focused input (clicking on #div directly).
据我所知，这是 FF 中的一个已知错误。一个快速（和“脏”的解决方法）是删除draggable文本输入focus事件上的属性，在文本输入事件上再次添加它blur，并禁用#drag div 上的文本选择以在您单击焦点输入外部时启用拖动（单击# div 直接）。
Updated fiddle here.
在这里更新小提琴。
Sample code:
示例代码：
JS:
JS：
$('#message')
.on('focus', function(e) {
$(this).closest('#drag').attr("draggable", false);
})
.on('blur', function(e) {
$(this).closest('#drag').attr("draggable", true);
});
CSS:
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;
}
Hope it could help you.
希望能帮到你。
回答by user859740
See Firefox defect.
请参阅 Firefox缺陷。
As an alternative, setting the draggable="false" on input focus event and replacing back to draggable="true" on input blur event works.
作为替代方案，在输入焦点事件上设置 draggable="false" 并在输入模糊事件上替换回 draggable="true" 有效。
See jsfiddlefor an example without any framework.
有关没有任何框架的示例，请参阅jsfiddle。
HTML:
HTML：
<div draggable="true" id="draggableDiv">
<textarea onfocus="onFocus();" onblur="onBlur();">Inside draggable (FIXED)</textarea>
</div>
JS:
JS：
onFocus= function(e) {
document.getElementById("draggableDiv").setAttribute("draggable", "false");
}
onBlur= function(e) {
document.getElementById("draggableDiv").setAttribute("draggable", "true");
}
回答by JoeTron
I used the onMouseEnter and onMouseLeave functions on the textarea to set the div draggable only when the mouse is outside the textarea.
我在 textarea 上使用 onMouseEnter 和 onMouseLeave 函数来设置 div 仅当鼠标在 textarea 之外时可拖动。
I did this because I needed the focus to stay in the edit fields while dragging and dragging itself does not trigger a focus event.
我这样做是因为我需要焦点停留在编辑字段中，而拖动和拖动本身不会触发焦点事件。
回答by Stuart Welch
I have also found using onmouseenter and onmouseleave to toggle the draggable attribute works better because it places the cursor in the input box where you actually click. When using onfocus/onblur, the cursor always goes to the start or end of the text even if you click in the middle.
我还发现使用 onmouseenter 和 onmouseleave 切换可拖动属性效果更好，因为它将光标放置在您实际单击的输入框中。使用 onfocus/onblur 时，即使您在中间单击，光标也会始终移动到文本的开头或结尾。
