无法在 Firefox 中拖动按钮元素答案

【问题标题】：Unable to drag a button element in Firefox无法在 Firefox 中拖动按钮元素
【发布时间】：2013-04-04 18:28:36
【问题描述】：

我正在处理的项目有问题。它是一个 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!");
}

【问题讨论】：

常规的 jQuery 怎么样？
这可能是一种可能性，我得问问。但如果这是唯一（体面的）解决方案，我认为这不会有太大问题。
这是一个firefox bug，我找不到任何解决方法...您这边有什么更新吗？

标签： javascript firefox drag-and-drop

【解决方案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

【讨论】：

默认情况下所有 XUL 元素都是“可拖动的”是什么意思，或者它在这种情况下有什么用处？ :)

【解决方案2】：

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

我可以通过几个步骤解决这个问题：

1) 为按钮添加一个包装器

2) 在包装器中添加 ::after 伪元素

3) 拉伸 ::after 以填充父级：

.wrapper {
   position: relative;

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

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

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

【讨论】：