Unable to drag a button element in Firefox

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. 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. I know I can use jQuery UI instead but this project does not allow me to. Here is a jsfiddle of my problem: http://jsfiddle.net/MJN6c/6/ Does anyone know how I can get the drag events to trigger on buttons in Firefox? The code: ``` 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!"); } ```