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

Answer 2

简而言之：这是Firefox的问题，而不是您的代码。拖动事件不会触发按钮，但会触发div。

我可以通过几个步骤处理此问题：

1）添加按钮包装

2）将伪元素添加到包装器

3）Stretch :: after填充父母：

.wrapper {
   position: relative;

   &:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
  }
}

这样:: after将超出正常流量，包装器的大小将按按钮的大小计算（通常）。如果按钮没有定义的z-index，则:: after将自动放在按钮的顶部（在z轴上）。这将导致在包装器上触发拖动事件，而不是按钮。问题解决了！

您可能希望在添加包装器后修复某些样式（例如，您必须移动：hover和：focus伪类到包装器）。

无法在Firefox中拖动按钮元素

2 个答案: