Невозможно перетащить элемент кнопки в Firefox

Question

У меня проблема с проектом, над которым я работаю. Это веб-приложение с интерфейсом, который частично существует из перетаскиваемых элементов.

Проблема в том, что перетаскиваемые элементы 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!"); 
} 

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: : после того, как заполнить родителя:

.wrapper { 
    position: relative; 

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

Этот путь :: после будет из нормального потока и размера обертки будет рассчитываться размер кнопки (как обычно). Если кнопка не указала z-index, :: после нее будет автоматически помещена кнопка (по оси z). Это приведет к срабатыванию событий перетаскивания на обертке, а не кнопке. И проблема решена!

Возможно, вы захотите исправить некоторые стили после добавления обертки (например, вам нужно переместить: hover и: focus псевдоклассы в обертку).