javascript - 无法在 Firefox 中拖动按钮元素

Question

我在处理一个项目时遇到问题。这是一个 Web 应用程序，其界面部分存在于拖放元素之外。

问题是可拖动的 div 元素工作正常，但按钮元素不会在 Firefox 中进行拖动，但它们在 Chrome 中工作。我认为这可能与 Firefox 处理按钮的现有事件的方式有关，这可能与 Chrome 的处理方式不同。

我知道我可以改用 jQuery UI，但这个项目不允许我这样做。

这是我的问题的一个 jsfiddle: http://jsfiddle.net/MJN6c/6/

有谁知道如何让拖动事件触发 Firefox 中的按钮？

代码:

var stage = document.querySelector('#drop');
var btnsAni = document.querySelectorAll('.btn-ani');

[].forEach.call(btnsAni, function (btn) {
    btn.addEventListener('dragstart', dragStart, false);
    btn.addEventListener('dragend', dragEnd, false);
});

stage.addEventListener('dragenter', dragEnter, false);
stage.addEventListener('dragleave', dragLeave, false);
stage.addEventListener('dragover', dragOver, false);
stage.addEventListener('drop', dragDrop, false);

function dragStart(e) {
    if (e.stopPropagation) e.stopPropagation();
    e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('Text', this.id);

    return false;
}

function dragEnd(e) {
    e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();

    return false;
}

function dragEnter(e) {
    e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();

    return false;
}

function dragOver(e) {
    e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';

    return false;
}

function dragLeave(e) {
    e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();

    return false;
}

function dragDrop(e) {
    e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();

    alert("Dropped!");
}

Answer 1

这看起来像是 FF 的错误，https://bugzilla.mozilla.org/show_bug.cgi?id=568313 .
顺便说一句，默认情况下，所有 XUL 元素都是“可拖动的”。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute