Javascript/JQuery drop event not firing in Internet Explorer IE 11

Question

I'm dragging and dropping images from a different browser tab into the tab for my web page. My event handlers for the "drop" event are working in every other desktop browser except Internet Explorer 11.

IE just navigates away to the URL of the image I dropped, rather than firing the "drop" event and letting my JS code do what it wants with it (as happens in Chrome, Firefox, Opera and Safari, on Windows 7). Code is below. Note none of the alerts listed in the code fire.

I even followed the advice given on Microsoft's page here: https://msdn.microsoft.com/en-us/library/ms536929(v=vs.85).aspx regarding cancelling the default action of "dragenter" and "specifying window.event.returnValue=false in both the ondragenter and ondragover event handlers" (note: other browsers didn't require me to have a dragenter event handler)

$(window).on("dragenter", function(event) {
    alert('drag enter');
    event.returnValue = false;
    event.preventDefault();  
    event.stopPropagation();
});

$(window).on("dragover", function(event) {
    alert('drag over');
    event.returnValue = false;
    event.preventDefault();  
    event.stopPropagation();
});

$(window).on("dragleave", function(event) {
    alert('drag leave');
    event.preventDefault();  
    event.stopPropagation();
});

$(window).on("drop", function(event) {
    alert('drop');
    event.preventDefault();  
    event.stopPropagation();
    var imageSrc = $(event.originalEvent.dataTransfer.getData('text/html'))
            .filter(function(i, elm){return $(elm).is('img');}).attr('src');

// Now do something with the imageSrc URL:

});

Many thanks for any suggestions!

Answer 1

It is working fine in IE Browser Version:11.0.40 for jQuery 2.2.4 version.
Please check your jQuery version    

Note: for me event has been fired for two times when dragging image from desktop to IE 11 browser.

Please find Demo link.

Answer 2

Edit: Interesting what I've got here (S.O question/answer), they had a similar problem dragging between two Internet Explorer 11 windows, on the same domain. So one more reason, if they are from different domains. He quotes:

so far I understood that this will work on Windows 10 MS browsers with at least 1607 as version

---

First, this is by no means intended to be an answer to this question, it merely serves as a group of points that may help build a final answer to this puzzling problem

Two cases scenario

1. On the same domain

   Tested when both pages are on localhost, Those events has fired normally : you will have to change getData('text/html') to getData('text') because IE support only that, 'URL' or files so you need to set setData() from the original page accordingly
   (Generally, if the dragged markup is an image without any links, you're fine the getData('text') gives you the attribute src of the image)

2. On different domains

   Here is the part where this is not much of an answer, the following points have been tried and are given here to be retested, tweaked or expanded in order to find a solution. As a final thought that I'm putting here first: may be this is not possible, because as you may already know, dragged markup can have inline scripts, making the target vulnerable to XSS attacks. It's not very unlikely that hackers have tried to make it happen (roughly as I'm doing right know) and each time Microsoft has counteract it.

   • As the original poster pointed out the use of returnValue=false is pointless. I've tried it on the original event event.originalEvent and with event as a window's event and as the handler parameter.

   • You may think since I've mention domain that this is a cross domain issue (very legitimate) here's what I've tried in PHP:

   header("Access-Control-Allow-Origin: *");

   • After IE had been known for been vulnerable to XSS attacks, it may have taken drastic measures against it in IE 11, so reverting to a previous version's behaviour of it, IE9 for instance :

   header('X-UA-Compatible: IE=EmulateIE9');
header('X-UA-Compatible: IE=9');

N.B The following point is not intended to be a viable solution (at least not from a developer's perspective) it is an attempt to narrow down the possibilities of the origin of the problem

• You may want to try Internet Explorer's :

  internet options>Custom level...-->miscellaneous--> under the label 'allow the dragging of content between separate windows' --> check enable

Or Internet Explorer security zones registry entries for advanced users or using this reference

Notice that for the purpose of testing you can make cross domain dragging between IE and Firefox/Chrome back and forth with DataTransfer behaving roughly as between two IEs on the same domain.