Javascript/JQuery在Internet Explorer IE 11中无法触发拖放事件

Question

我正在从另一个浏览器标签页中拖放图像到我的网页标签页。在除了Internet Explorer 11之外的所有桌面浏览器中，我的“drop”事件处理程序都能正常工作。

IE只是导航到我拖放的图像的URL，而不是触发“drop”事件并让我的JS代码对其进行操作（在Windows 7上的Chrome，Firefox，Opera和Safari中会发生这种情况）。代码如下。请注意，代码中列出的任何警报都不会触发。

我甚至遵循了Microsoft页面上给出的建议：https://msdn.microsoft.com/en-us/library/ms536929(v=vs.85).aspx取消“dragenter”的默认操作，并在“ondragenter”和“ondragover”事件处理程序中指定window.event.returnValue=false（注意：其他浏览器不需要我有dragenter事件处理程序）

$(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:

});

非常感谢任何建议！

- Alex Kerr

Answer 1

编辑： 我在这里（S.O问题/答案）得到了有趣的信息，他们在两个相同域名下的Internet Explorer 11窗口之间拖动时遇到了类似的问题。因此，如果它们来自不同的域，则还有一个原因。他引用：

到目前为止，我了解到这将适用于带有1607版本或更高版本的Windows 10 MS浏览器

---

首先，这并不是对这个问题的答案，它仅仅是一些有助于构建最终解决这个棘手问题的要点。

两种情况的场景。

1. 在同一域名下

   当两个页面都在 localhost 上时测试，这些事件通常会触发：

   你需要将 getData('text/html') 更改为 getData('text')，因为 IE 仅支持 这种方式，'URL' 或 文件 所以你需要相应地从原始页面设置 setData()
   （通常情况下，如果拖动的标记是一个没有任何链接的图像，则使用 getData('text') 将给出图像的属性 src）

2. 在不同的域名下

   这部分并不是很有答案，以下点已经尝试过，并在此提供以重新测试、调整或扩展以找到解决方案。最后的想法我先放在这里：也许这是不可能的，因为你可能已经知道，拖动的标记可以有内联脚本，使目标易受 XSS 攻击。黑客很可能已经尝试过（就像我现在正在做的那样），每次微软都会反击。

   • 正如原帖作者指出的，使用 returnValue=false 是无意义的。我尝试过在原始事件 event.originalEvent 和作为 window 的事件以及作为 handler 参数。

   • 你可能认为由于我提到了域名，这是一个跨域问题（非常合理），以下是我在 PHP 中尝试的内容：

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

   • IE 11 可能已经采取了极端措施防止 XSS 攻击，因此回归到其之前版本的行为，例如 IE9：

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

注意：以下内容并非旨在提供可行解决方案（至少从开发者的角度来看），而是试图缩小问题来源的可能性。

• 您可以尝试使用Internet Explorer的：

  Internet选项>自定义级别...-->杂项-->在标签“允许在不同窗口之间拖动内容”下-->勾选启用

或者高级用户的Internet Explorer安全区域注册表项或使用此参考资料

请注意，为了测试目的，您可以使IE和Firefox/Chrome之间的跨域拖动来回进行，DataTransfer行为大致与在同一域中的两个IE之间相同。

- user10089632

Answer 2

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.

请找到演示链接。

- Thulasiram

---

@Alex Kerr：请分享您正在使用的jQuery版本和IE浏览器版本。 - Thulasiram

他说：“从不同的浏览器标签页拖放图像到我的网页标签页中。” - user10089632