Menu
In Chrome the drag event is fired and logged to the console. In Firefox and IE, it does not.
<html>
<head>
<style>
#d {
width:20px;
height:20px;
background-color: red;
}
</style>
</head>
<body>
<div id="d" draggable="true"></div>
<script>
d = document.getElementById('d');
d.addEventListener('dragstart', function(e){
console.log("dragstart:", e);
});
d.addEventListener('drag', function(e){
console.log("drag:", e);
});
</script>
</body>
</html>
Fiddle version: http://jsfiddle.net/korimako/e1wqafyr
How do I set up a div to dispatch drag events and listen for them properly?
523
Firefox requires that dataTransfer is set before the drag event is fired
d = document.getElementById('d');
d.addEventListener('drag', function(e){
console.log("drag:", e)
});
d.addEventListener('dragstart', function(e){
e.dataTransfer.setData('application/node type', this);
console.log("dragstart:", e)
});
FIDDLE
See this for drag types
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
