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

当输入到draggable=true的元素中时，似乎会丢失很多功能。这似乎只发生在firefox中

请参阅我的JSFIDLE：

Html:

---

现在尝试使用firefox在输入中选择文本。似乎不可能。在IE/Chrome中尝试同样的功能。似乎工作正常。

据我所知，这是FF中的一个已知错误。一个快速而肮脏的解决方法是删除文本输入焦点事件上的可拖动属性，在文本输入模糊事件上再次添加该属性，并在拖动div上禁用文本选择，以便在单击焦点输入外部时启用拖动直接单击div

更新的小提琴

示例代码：

JS:

CSS:

希望它能帮助您。

请参阅Firefox

另一种方法是，在输入焦点事件中设置draggable=false，并在输入模糊事件中替换回draggable=true

有关没有任何框架的示例，请参见

HTML:

---

我在textarea上使用了onMouseCenter和onMouseLeave函数，仅当鼠标位于textarea之外时才设置div draggable

---

之所以这样做，是因为我需要焦点保持在编辑字段中，而拖动本身不会触发焦点事件。

我还发现使用onmouseenter和onmouseleave切换可拖动属性效果更好，因为它将光标放在您实际单击的输入框中。当使用OnPosie/OnFLUR时，光标总是在文本的开头或结尾，即使您点击中间。

< P>如果您像我一样遇到这个问题，并且使用SoStable .js，您可以使用过滤器选项指定不会触发拖动的元素，从而允许输入正常运行。 JQuery：

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

您还可以从以下Sortable.js选项列表中找到此信息：

---

谢谢！一个肮脏的解决办法真的。。。至于现在：我从可拖动区域中删除了输入元素，因为我没有在所有浏览器中都达到预期效果IE8仍然是一个问题。您是否建议不要使用html5拖放，而是使用JQuery UI拖放？您可以通过阅读：和找到更多信息。如果您还需要针对各种各样的浏览器—传统浏览器，如果您不想让人头疼，如果您的时间很短，我建议您使用jQuery UI拖放功能。IE中也存在此问题。。。确切地说是IE 11.0.9600。。

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

$('#message')
    .on('focus', function(e) {
        $(this).closest('#drag').attr("draggable", false);
    })
    .on('blur', function(e) {
        $(this).closest('#drag').attr("draggable", true);
    });

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

<div draggable="true" id="draggableDiv">
    <textarea onfocus="onFocus();" onblur="onBlur();">Inside draggable (FIXED)</textarea>
</div>

onFocus= function(e) {
    document.getElementById("draggableDiv").setAttribute("draggable", "false");
}
onBlur= function(e) {
    document.getElementById("draggableDiv").setAttribute("draggable", "true");
}

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