javascript - How to get data from DataTransfer.getData in event Dragover or Dragenter? - Stack Overflow

admin管理员组

文章数量:1173630

I have a code to set data in dragstart:

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

When I get data from DataTransfer.getData in event Drop, it works. But when I want get to data in the dragover or dragenter events, data is null.

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

So, how to get the data in event dragover or dragenter?

I have a code to set data in dragstart:

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

When I get data from DataTransfer.getData in event Drop, it works. But when I want get to data in the dragover or dragenter events, data is null.

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

So, how to get the data in event dragover or dragenter?

• javascript
• jquery
• angularjs
• jquery-ui
• angular-ui

Share Improve this question Follow edited Mar 18, 2023 at 23:35 Raine Revere 33.5k66 gold badges4545 silver badges6161 bronze badges asked Aug 10, 2015 at 9:09 nắng huế yêu gái huếnắng huế yêu gái huế 42511 gold badge44 silver badges88 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 37

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.

How about:

var dragged = undefined;

element.addEventListener('dragstart', function () {
    dragged = this;
});

element.addEventListener('dragend', function () {
    dragged = undefined;
});

element.addEventListener('dragenter', function (e) {
    //e.g.
    if (dragged.classList.contains('list-item')) {
        // do something   
    }
});

本文标签： javascriptHow to get data from DataTransfergetData in event Dragover or DragenterStack Overflow