Draggable button in Firefox
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.
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>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.