无法在Firefox中拖动按钮元素

Question

我正在处理我正在进行的项目的问题.它是一个Web应用程序,其界面部分存在于拖放元素之外.

问题是可拖动的div元素工作正常,但按钮元素不会在Firefox中使用拖动,但它们可以在Chrome中运行.我认为这可能与Firefox处理已存在的按钮事件的方式有关,这可能与Chrome的处理方式不同.

我知道我可以使用jQuery UI,但这个项目不允许我这样做.

这是我的问题的一个方面: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