Draggable button in Firefox
There is already a bug on Firefox where you can't drag a button. https://bugzilla.mozilla.org/show_bug.cgi?id=568313
However you can drag your div containing button (which is not draggable right now) using 'after' pseudo class.Example:
document.getElementById("myDivWithButton").addEventListener( "dragstart", function (e) { e.dataTransfer.setData("Text", "myDivWithButton") });.frontdrop { position: relative;}.frontdrop:after { content: ''; top: 0; left: 0; right: 0; bottom: 0; position: absolute;}<div id="myDivWithButton" class="frontdrop" draggable="true"><button>Div with Button</button></div>
From others, I came to know that your issue is because of a bug exists in Firefox. I suggest you to implement custom listeners to imitate drag event.My solution is as follows:
var btn = document.getElementById('btn');var btnPressed = false;btn.addEventListener('mousedown', function(e) { btnPressed = true; px = e.clientX; py = e.clientY;});btn.addEventListener('mouseup', function(e) { btnPressed = false;})window.addEventListener('mouseup', function(e) { btn.style.MozTransform = ""; btn.style.WebkitTransform = ""; btn.style.opacity = 1;})window.addEventListener('mousemove', function(e) { if(btnPressed) { dx = e.clientX - px; dy = e.clientY - py; btn.style.opacity = 0.85; btn.style.MozTransform = "translate(" + dx + "px, " + dy + "px)"; btn.style.WebkitTransform = "translate(" + dx + "px, " + dy + "px)"; }})<button id="btn">Drag Me</button>I know its not perfect. Hard-coding is the only way to resolve this issue until Firefox fix this bug.
I found a tricky solution:
<label draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '')"> <input type="button" value="Click me!" style="pointer-events: none" onclick="console.log(event)"></label>Wrap input with a draggable label and set pointer-events CSS property to none. Using this method, your button will be interactive and draggable.