Javascript / JQuery event does not fire in Internet Explorer IE 11

Question

I am dragging images from another browser tab to the tab of my web page. My event handlers for the drop event work in any desktop browser other than Internet Explorer 11.

IE just jumps to the URL of the image that I dropped, instead of firing the drop event and letting my JS code do what it wants with it (like it does in Chrome, Firefox, Opera and Safari, in Windows 7). The code is below. Please note: none of the warnings listed in the code light up.

I even followed the recommendations on the Microsoft page here: https://msdn.microsoft.com/en-us/library/ms536929(v=vs.85).aspx regarding undoing the default dragenter and window.event.returnValue=false instructions window.event.returnValue=false in the ondragenter and ondragover "event handlers (note: other browsers did not 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: }); 

Thanks so much 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. 

Find a Demo .

Answer 2

Edit: Interesting, what I have here (question and answer to the SO question) , this guy had a similar problem dragging and dropping between two windows of Internet Explorer 11 in the same domain. So, another reason if they are from different domains. He quotes:

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

---

Firstly, it is by no means intended to answer this question, it merely serves as a group of points that can help make up the final answer to this mysterious problem.

script with two scripts

• In the same area

  Tested when both pages are on localhost , these events worked fine: you will need to change getData('text/html') to getData('text') , because IE only supports what 'URL' or files so you need to set setData() from the source page, respectively
  (As a rule, if the draggable markup is an image without any links, you're fine, getData('text') gives you the src attribute of the image)

• In different domains

  Here is the part where this is not a very big answer, the following points have been checked and are given here to check, configure or expand to find a solution. As a last thought, what I put here first: maybe this is impossible, because, as you already know, draggable markup can have embedded scripts, which makes the vulnerability vulnerable to XSS attacks. It is not very unlikely that hackers would try to do this (roughly the way I am right, I know), and every time Microsoft counteracts this.

  • As the original poster showed, using returnValue=false pointless. I tried it in the original event event.originalEvent and event as a window event and as a handler parameter.

  • You might think, as I mention the domain, that this is a cross domain problem (very legitimate) here, that I tried in PHP:

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

  • After IE was known to be vulnerable to XSS attacks, it may have taken drastic measures against it in IE 11, therefore, reverting to its previous version, IE9, for example:

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

NB The next point is not intended for a viable solution (at least not from the point of view of the developer), it is an attempt to narrow down the possibility of a problem

• You might want to try Internet Explorer:

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

Either Internet Explorer security zone registry entries for advanced users or using the link

Please note that for testing purposes, you can drag the crosshairs between IE and FF / Chrome back and forth if the DataTransfert behaves roughly like between two IEs in the same domain.