HTML5 DnD dataTransfer setData or getData not working in every browser except Firefox

var dragStartHandler = function (e) {
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/plain", this.id);
};

The problem is with the "text/plain". The standard specification in MSDN documentation for setData is just "text" (without the /plain). Chrome accepts the /plain, but IE does not, in any version I tried.

I struggled with the same problem for several weeks, trying to figure out why my "drop" events weren't firing properly in IE while they did in CHrome. It was because the dataTransfer data hadn't been properly loaded.

I came across this post because I was having a similar experience with Chrome's dataTransfer.setData() and dataTransfer.getData() functions.

I had code that looked something like this:

HTML:
<div ondragstart="drag(event)" ondrop="newDrop(event)"></div>

JAVASCRIPT:
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function newDrop(ev){
    var itemDragged = ev.dataTransfer.getData("text");
    var toDropTo = ev.target.id;
}

The code worked perfectly fine in Internet Explorer but when it was tested in Chrome, I was unable to get values set in my dataTransfer object (set in drag function) using the dataTransfer.getData() function in the newDrop function. I was also unable to get the id value from the statement ev.target.id.

After some digging around on the web, I discovered that I was suppose to use the event parameters currentTarget property rather than the events target property. Updated code looked something like this:

JAVASCRIPT:
function drag(ev) {
    ev.dataTransfer.setData("text", ev.currentTarget.id);
}
function newDrop(ev){
    var itemDragged = ev.dataTransfer.getData("text");
    var toDropTo = ev.currentTarget.id;
}

With this change I was able to use the dataTransfer.setData() and dataTransfer.getData() functions in chrome as well as internet explorer. I have not tested anywhere else and I am not sure why this worked. Hope this helps and hopefully someone can give an explanation.

I was working on a website testing with Firefox.

In WAMP on my laptop, code like the OP's worked. However, when I moved the website to HOSTMONSTER, it didn't work there.

I followed Joshua Espana's answer, and it resolved my problem.

failed:

ev.dataTransfer.setData("text/plain", ev.target.id);

worked:

 ev.dataTransfer.setData("text", ev.currentTarget.id);

Thank, Joshua!

Anything pased to the dataTransfer only becomes available on ondrop events but ONLY on ondrop events (I believe this is a security consideration to prevent data being exposed to nefarious elements during a drag).

If you try adding an ondrop handler you should see the data exposed. Well at least you would if there weren't for one final trick...

To get the drop event to fire you need call .preventDefault on the dragover event or it prevents the drop event from firing

HTML (Angular)

<div (dragstart)="handleDragStart($event)"
     (dragover)="handleDragover($event)"
     (dragend)="handleDragEnd($event)"
     (drop)="handleDrop($event)">
  <div class="sortItem">item 1</div>
  <div class="sortItem">item 2</div>
  <div class="sortItem" draggable="true">Draggable</div>
  <div class="sortItem">item 4</div>
</div>

Handlers (Typescript)

  handleDragStart(event: DragEvent){
    event.dataTransfer?.setData("text", '{"some": "data"}')
    console.log('dragstart data:', event.dataTransfer?.getData("text"))
  }

  handleDragover(event: DragEvent) {
    console.log('dragover data:', event.dataTransfer?.getData("text") || 'none')
    event.preventDefault()
  }

  handleDragEnd(event: DragEvent) {
    console.log('drag end data:', event.dataTransfer?.getData("text") || 'none')
  }

  handleDrop(event: DragEvent) {
    console.log('drag drop data:', event.dataTransfer?.getData("text") || 'none')
  }

Output from the above

If you drop the item INSIDE the container with the ondrop handler

If you don't cancel the dragover event...

If you drop the item OUTSIDE container with the ondrop handler

If you don't cancel the dragover event...

Other relevant SO questions

SO: Data only available on drop

SO: Drop event not firing