无法在Firefox中拖动按钮元素 [英] Unable to drag a button element in Firefox

问题描述

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

I'm having an issue with a project I'm working on. It's a web application with an interface that partly exists out of drag 'n drop elements.

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

The issue is that the draggable div elements work fine but the button elements won't engage the drag in Firefox but they do work in Chrome. I think this might have something to do with the way Firefox handles the already existing events of the button, which is probably different than how Chrome does this.

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

I know I can use jQuery UI instead but this project does not allow me to.

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

Here is a jsfiddle of my problem: http://jsfiddle.net/MJN6c/6/

有谁知道我是怎么回事可以在Firefox中的按钮上触发拖动事件吗？

Does anyone know how I can get the drag events to trigger on buttons in 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!");
}

推荐答案

这看起来像一个bug FF， https://bugzilla.mozilla.org/show_bug.cgi?id=568313。

另外，默认情况下，所有XUL元素都是可拖动的。
https://developer.mozilla.org / en-US / docs / Web / Guide / HTML / Drag_operations＃draggableattribute

This looks like a bug with FF, https://bugzilla.mozilla.org/show_bug.cgi?id=568313.
As an aside, all XUL elements are "draggable" by default. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute

这篇关于无法在Firefox中拖动按钮元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！