問題描述

似乎輸入元素在放入具有可拖動=真"的元素時失去了很多功能.這似乎只發生在 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 中的一個已知錯誤.一個快速(和dirty"的解決方法)是刪除文本輸入 focus 事件上的 draggable 屬性，再次將其添加到文本輸入 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).

更新小提琴這里.

示例代碼:

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 中的輸入元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！