使用HTML5拖放功能阻止拖动事件干扰Firefox中的输入元素 [英] Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop

问题描述

似乎一个输入元素在使用draggable =true放入元素时会失去很多功能。这只是似乎在firefox中发生。

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.

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

See my 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中尝试一样。

Now try to select text in the input using firefox. Seems impossible. Try the same in IE/Chrome. Seems to work just fine.

推荐答案

据我所知，这是FF中已知的错误。一个快速（和脏解决方法）将删除文本输入焦点 draggable 属性$ c>事件，再次添加文本输入 blur 事件，并禁用#drag div上的文本选择，以便在点击焦点输入之后单击拖动（点击#div直接）。

As far as I know this is a known bug in FF. A quick (and "dirty" workaround) would be to remove the draggable attribute on text input focus event, add it again on text input blur event, and disable text selection on #drag div to enable dragging once you clicked outside the focused input (clicking on #div directly).

更新小提琴 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;
}

希望可以帮助您。

这篇关于使用HTML5拖放功能阻止拖动事件干扰Firefox中的输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！