how to get data from DataTransfer.getData in event Dragover or Dragenter

Question

i have a code :

element.addEventListener('dragstart',function(e){
   e.dataTransfer.setData('Text', 'something is here');
},false);

when i getdata from DataTransfer.getData in event Drop is running. but when i want get data in event dragover or dragenter, data is null.

element.addEventListener('dragover',function(e){
   var a = e.dataTransfer.getData('Text');
   console.log(a);
},false);

So, how to get data in event dragover or dragenter

Answer 1

Normally you don't have access to this information on events other than dragstart and drop. Firefox seems to give you access but it seems to go against the standard.

The way the data is transfered during a drag and drop is through a data store object, that contains all the information needed for the different operations to happen. But there are certain restrictions to what you can do with this information depending on the event on which you access this data store. There are 3 modes, that are defined as follow:

A drag data store mode, which is one of the following:

Read/write mode

For the dragstart event. New data can be added to the drag data store.

Read-only mode

For the drop event. The list of items representing dragged data can be read, including the data. No new data can be added.

Protected mode

For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.

https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

So on dragover, the data store is in protected mode, hence the data shouldn't be available. Again, Firefox implements this differently, but you shouldn't rely on it in any case.

These modes are there for security reasons, these data transfer allows transfer not only of elements of a same page, but of data from other applications, files, etc.