I am listening for drop events on a div element. The events fire in Chrome (v36.0.1985), Firefox (v30) but do not fire in IE (v10.0.9200). I've created a simple JSFiddle to illustrate the problem.
Works:
1.) Open YouTube in Chrome
2.) Open http://jsfiddle.net/AXw6f/17/ in Chrome
3.) Drag a youtube video thumbnail onto the "DropZone" and an alert will appear.
Fails:
Redo the above but use IE 10 or 11. Instead of an alert in step 3 it simply redirects the page.
NOTE: I've found an example where IE would recognize a drop at http://jsfiddle.net/Ctnpe/ but it drops onto a canvas. When I replace the canvas with a div it reverts back to the redirect.
I've tried various combinations of preventDefault, stopPropogation, and return false with no success:
$("#DropZone").on("dragleave", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#DropZone").on("dragenter", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#DropZone").on("dragover", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$('#DropZone').on('drop', function () {
alert('test');
event.preventDefault();
event.stopPropagation();
return false;
});
Any help is greatly appreciated. Thanks!