Safari 5.1 打破了 HTML 原生拖放？

Question

昨晚，我想我会做一个快速项目来演示 HTML5 功能并尝试一些事情。但是，我似乎无法弄清楚如何让拖放在 Safari 中工作，而它在 Chrome 和 Firefox 中完美运行。更准确地说，当您尝试将网站内的图像拖动到放置区域时，似乎在 Safari 中不会触发放置事件。同时，当您从桌面拖放文件时，它会触发。

我不太确定，但我很确定当我在工作中尝试相同的脚本时（我有 Safari 5.0.2 等），它触发了 drop 事件（明天要检查它以确定) 并给了我预期的与 FileReader 相关的错误。但是当我刚刚在我自己的 PC 上安装 Safari 5.1 时，我只能得到拖动、进入和离开事件（如果文件被拖动到浏览器中，也会下降）。

我已经在谷歌上搜索了一段时间，但似乎没有找到一个在 Safari 5.1 中真正有效的拖放示例。连 Safari 的 dev-centre's sample 都不起作用，更不用说 html5demo.com 1 和 html5demo.com 2 了。这让我想到 Safari 是否有错误，或者他们是否实施了一些未反映在开发中心的强制性内容（最后更新于 2009 年）。

我正在尝试修复的脚本位于 my site（抱歉，没有问题的特定代码可以发布，因为它似乎在其他地方也被破坏了）。

PS！在拼命尝试修复 Safari 中的拖放操作时，我可能在自己的网站中引入了一些错误，但我太累了，无法现在修复它们。

更新：刚刚在工作中确认 drop 事件确实在 Mac OS X 上的 Safari 5.0.2 中触发。

更新 2： 还确认在 Win 7 上使用 Safari 5.0.6 一切正常，同一台计算机在 5.1 上失败

Answer 1

使用 Safari 5.1.7 Mac 进行测试：

要查看drop 事件触发，您必须处理dragover 事件并调用event.preventDefault()。

这是我找到答案的（非常有趣的）讨论：

http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

我不知道这是否真的解决了这个问题，因为提问者的网站（至少截至今天）这样做了。它在我的机器上运行良好（HTML5 演示页面也是如此）。但这可能会帮助那些不了解这个相当不直观的实现细节的人来这个线程。

Answer 2

我在前几天刚安装的 Windows 7 PC 上使用 Safari 5.1.5 (7534.55.3)，之前没有安装过 Safari，我无法让任何在线 HTML5 拖放演示工作.

我正在开发一个拖放项目，Modernizr 告诉我我很适合使用 Safari (Modernizr.draganddrop == true)，但是当我实际放置项目时，放置事件不会触发.

我添加了警报调试，什么都没有。

我的测试表明，Windows 7 PC 掉落事件上的 Safari 5.1.5 (7534.55.3) 已损坏。所有其他拖动事件似乎都有效：dragstart、dragend、dragenter、dragleave、dragover。

Answer 3

澄清一下：访问了您的网站并没有发现任何错误。打开控制台，没有错误，一切似乎都按设计运行。尝试了所有提供的示例，没有错误。

所有示例都可以正常工作 Safari 版本 5.1 (7534.48.3)。抱歉，伙计——也许是你改变了一个设置？

请允许我提出一种可能性：

转到 Safari->Empty Cache... 然后 Safari->Reset Safari... 尝试重新加载页面。

很可能，缓存的某些内容会造成冲突。 您的脚本似乎没有任何问题。

编辑

需要检查的一些事项...

您的函数名称中是否包含保留字？我已经这样做了，如果它没有抛出任何错误，但它根本行不通。

我遇到了一些奇怪的问题，Safari 没有运行写为funcName = function(){} 的方法。如果您可以确定未触发的方法（我在开发时添加了一个名为 DBG 的小功能，我将在下面添加 - 基本上，如果设置了调试标志，您可以登录到控制台），您可以尝试重写函数。

// Some sort of boolean flag.
var debug = true;

// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
  debug ? console.log(str) : return;
}

我仍然认为最终归结为缓存错误，但值得一试。

Answer 4

我遇到了类似的问题，drop 事件似乎没有触发。 Safari 显然希望“dragover”事件也被绑定。一旦我也添加了它，它就起作用了。所以...我正在分享以防万一。

我的第一次尝试：

$(document).bind 
  drop: (e) ->
    // This never gets fired in safari (does work in chrome)
    console.log e.originalEvent.dataTransfer.files
    false

我的“修复”：

$(document).bind 
  dragover: (e) ->
    console.log e
    false
  drop: (e) ->
    // This does get fired (in chrome and safari)
    console.log e.originalEvent.dataTransfer.files
    false