使用 HTML5 拖放防止拖動事件干擾 Firefox 中的輸入元素

Question

似乎將 input 元素放入帶有 draggable="true" 的元素時會失去很多功能。 這似乎只發生在 Firefox 中。

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

網址：

<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）。

在這里更新小提琴。

示例代碼：

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

希望能幫到你。

Answer 2

請參閱 Firefox缺陷。

作為替代方案，在輸入焦點事件上設置 draggable="false" 並在輸入模糊事件上替換回 draggable="true" 有效。

有關沒有任何框架的示例，請參閱jsfiddle 。

HTML：

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

JS：

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

Answer 3

我在 textarea 上使用 onMouseEnter 和 onMouseLeave 函數來設置 div 僅當鼠標在 textarea 之外時可拖動。

我這樣做是因為我需要焦點停留在編輯字段中，而拖動和拖動本身不會觸發焦點事件。

Answer 4

我還發現使用 onmouseenter 和 onmouseleave 切換可拖動屬性效果更好，因為它將光標放置在您實際單擊的輸入框中。 使用 onfocus/onblur 時，即使您在中間單擊，光標也會始終移動到文本的開頭或結尾。

Answer 5

如果你和我一樣遇到這個問題，並且在使用Sortable.js，你可以使用filter選項來指定不會觸發拖動的元素，從而允許輸入正常運行。

查詢：

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

您還可以從此處找到的 Sortable.js 選項列表中找到此信息： https : //github.com/SortableJS/sortablejs