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

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 中的一个已知错误。一个快速(和“脏”解决方法)是删除文本输入 focus 事件上的 draggable 属性，再次将其添加到文本输入 blur 事件，并禁用 #drag div 上的文本选择，以便在您点击焦点输入之外(直接点击 #div)后启用拖动。

更新 fiddle 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;
}

希望对您有所帮助。