I've found a strange problem in the IE10 browser, where I'm wondering why nobody else has this problem.
When I'm setting the dataTransfer.setData('Text') in the dragstart event, I can access it in drop events.
But when I'm trying to access it in dragover and dragenter events it is always empty.
As example I manipulated the official IE10 example and changed addEventListener('drop', ...) to addEventListener('dragover').
In IE9 and other browsers it works fine. Only IE10 does not react.
Is this a known bug in IE10, or is there any workaround?
<!DOCTYPE html><!-- Copyright © Microsoft Corporation. All rights reserved. --><html><head><meta charset="utf-8" /><title>Internet Explorer Developer Sample</title><link rel="stylesheet" type="text/css" href="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/css/base-sdk.css" /><link rel="stylesheet" type="text/css" href="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/css/allscenarios.css" /><script>
(function () {
function id(elementId) {
return document.getElementById(elementId);
}
function dragStart(elt) {
elt.innherHTML = "dragged";
}
function checkShapeDrop(e) {
document.getElementById("matchStatus").innerHTML = " ";
// Remove the 'empty' and 'filled' part of the id's and compare the rest of the strings.
var target = this.id.replace("empty", "");
var elt = e.dataTransfer.getData('text').replace("filled", "");
if (target == elt) { // if we have a match, replace empty shape with filled shape image
this.children[0].src = "http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/empty" + target + "2.png";
// Remove the original filled image to give illusion that the filled image is now inside the empty one
document.getElementById(e.dataTransfer.getData('text')).style.display = "none";
}
else
{
document.getElementById("matchStatus").innerHTML = "<span style='color: red;'>Pieces don't match!</span>";
}
}
// When dragging starts, set dataTransfer's data to the element's id.
function startShapeDrag(e) {
e.dataTransfer.setData('text', this.id);
}
function resetShapes() {
id('filledTriangle').style.display = "block";
id('filledSquare').style.display = "block";
id('filledCircle').style.display = "block";
id('emptyTriangle').children[0].src = "http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/emptyTriangle.png";
id('emptySquare').children[0].src = "http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/emptySquare.png";
id('emptyCircle').children[0].src = "http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/emptyCircle.png";
document.getElementById("matchStatus").innerHTML = " ";
}
function initialize() {
// Assign event listeners to the divs to handle dragging.
document.getElementById('filledTriangle').addEventListener('dragstart', startShapeDrag, false);
document.getElementById('filledCircle').addEventListener('dragstart', startShapeDrag, false);
document.getElementById('filledSquare').addEventListener('dragstart', startShapeDrag, false);
document.getElementById('emptyTriangle').addEventListener('dragover', checkShapeDrop, false);
document.getElementById('emptySquare').addEventListener('dragover', checkShapeDrop, false);
document.getElementById('emptyCircle').addEventListener('dragover', checkShapeDrop, false);
id('shapeButton').addEventListener('click', resetShapes, false);
}
document.addEventListener("DOMContentLoaded", initialize, false);
})();</script></head><body role="application"><div id="header" role="contentinfo"></div><!--Sample title--><h1 id="sampleTitle">HTML5 Drag and Drop</h1><h2>Scenario 4: Putting it all together</h2><p><a href="default.html">Back to scenarios menu</a></p><!--Rendered result--><div class="resultRegion" role="region" aria-labelledby="resultLabel" aria-live="assertive"><h3 id="resultLabel">Result</h3><div class="resultContent"><p>Drag the filled shapes onto the empty shapes.</p><p id="matchStatus"> </p><input type="button" id="shapeButton" value="Reset"><div><div id="emptyTriangle" class="shape" ondragover="return false;"><img src="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/emptyTriangle.png" alt="empty triangle" draggable="false" /></div><div id="emptySquare" class="shape" ondragover="return false;"><img src="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/emptySquare.png" alt="empty square" draggable="false"/></div><div id="emptyCircle" class="shape" ondragover="return false;"><img src="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/emptyCircle.png" alt="empty circle" draggable="false"/></div></div><div id="filled"><div id="filledSquare" class="shape" draggable="true"><img src="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/filledSquare.png" alt="filled square" /></div><div id="filledTriangle" class="shape" draggable="true"><img src="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/filledTriangle.png" alt="filled triangle" /></div><div id="filledCircle" class="shape" draggable="true"><img src="http://samples.msdn.microsoft.com/iedevcenter/DragAndDrop/images/filledCircle.png" alt="filled Circle" /></div></div></div></div><div id="footer" role="contentinfo"></div></body></html>