HTML5 Drag and Drop Data Transfer and Chrome
The following code:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { console.log(ev.dataTransfer.getData("Text")); ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> with Firefox, correctly enter the dataTransfer object and return the image identifier ( drag1 ) when the allowDrop function is called by the ondragover event, but in Chrome getData returns an empty string. Is this an error or does Chrome return a valid dataTransfer object with only the ondrop event?
Chrome does not set dataTransfer before uninstalling. Instead, I just set the drag and drop link to a "global" variable. :-)
You cannot use dataTransfer in chrome except for the drop event.
instead, declare a Global variable.
for your situation, try the following:
function drag(ev) { el = ev.target; ev.dataTransfer.setData("Text",ev.target.id); } function allowDrop(ev) { console.log(el); ev.preventDefault(); } Actually, this is a very trick in Chrome. I have a simple page for dragging some div into some container. I set the id of the drag div element to dataTransfer using the ondragstart method. I am trying to get a drag and drop div from a dataTransfer in an ondrop callback and then copy it to a container. Everything works fine in Chrome on the local (I mean only open it from Explorer, file: // ). But when I put it on a website, then open it with http: // . It does not work in chrome. Therefore, I use the same solution with Per Digre. Set the global variable in dragstart , clear the dragend variable. Hope this helps you!