Drag and Drop event does not fire in Firefox or IE

Question

Drag and Drop event does not fire in Firefox or IE

In Chrome, a drag and drop event fires and logs to the console. In Firefox and IE, this is not the case.

<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>

Script Version: http://jsfiddle.net/korimako/e1wqafyr

How to set up a div to send drag events and listen to them correctly?

+4

javascript html5 draggable

Korimako Jan 05 '15 at 22:28

source share

1 answer

adeneo · Accepted Answer · 2015-01-05T22:35:48+0000

Firefox requires it to dataTransferbe installed 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

Drag and Drop event does not fire in Firefox or IE

More articles: