8

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

2 回答 2

3

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

于 2014-10-29T00:15:56.907 回答
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 伪类移动到包装器）。

于 2017-05-10T09:23:16.470 回答