How to get data from DataTransfer.getData in case of 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 the Drop event is fired. but when I want to get data in case of drag events or dragenter, the data is zero.

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

So how to get data in dragover or dragenter mode

Answer 1

Usually you do not have access to this information about events other than dragstart and drop . Firefox seems to give you access, but it seems to go against the standard.

The method of transferring data during drag and drop is carried out through the data store object, which contains all the information necessary to perform various operations. But there are certain restrictions on what you can do with this information, depending on the event with which you are accessing this data warehouse. There are 3 modes that are defined as follows:

Drag and drop data storage mode, which is one of the following:

Read / write mode

For the dragstart event. New data can be added to the drag and drop data warehouse.

Read-only mode

For the drop event. A list of items representing dragged data can be read, including data. New data cannot be added.

Protected mode

For all other events. Formats and views in the drag and drop data store You can list the items that represent the data to be dragged, but the data itself is not available and new data cannot be added.

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

Thus, when dragging and dropping, the data warehouse is in protected mode, so the data should not be accessible. Again, Firefox does this differently, but you should not rely on it anyway.

These modes exist for security reasons, these data transfers allow you to transfer not only elements of the same page, but also data from other applications, files, etc.