Safari 5.1破坏HTML本机拖放？ [英] Safari 5.1 broke HTML native drag and drop?

问题描述

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

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

我一直在谷歌一段时间了，似乎没有找到一个实际在Safari 5.1中工作的拖放实例。甚至Safari的开发中心的示例不起作用，更不用说 html5demo.com 1 和 html5demo.com 2 。这导致我想到Safari是否有错误，或者也许他们已经实施了一些强制性的东西，没有体现在开发中心（最后更新于2009年）。

我正在修复的脚本是我的网站（对不起，没有特定的问题代码发布，因为它似乎也被打破了其他地方）。

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

更新：刚刚确认，在Mac OS X上的Safari 5.0.2中，下拉菜单事件触发。

更新2： / strong>还确认，一切都在Win7上与Safari 5.0.6完美一致，与5.1失败的同一台计算机

解决方案

使用Safari 5.1.7 Mac测试：

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

这是（相当有趣）的讨论，在那里我找到答案：

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

我不知道这是否真的解决了这个问题因为asker的网站（至少在今天）这样做。它在我的机器上工作正常（和HTML5演示页面一样）。但是这可能会帮助有人来到这个问题，而不知道这个不直观的实现细节。

Last night, I thought I'd do a quick project to demonstrate HTML5 capabilities and to try some things out. However, I can't seem to figure out how to get drag and drop to work in Safari, while it works perfectly in Chrome and Firefox. More precisely, it seems that drop event does not fire in Safari, when you try to drag an image inside the website into the drop area. At the same time it does fire when you drag and drop a file from desktop.

I'm not really sure, but I'm pretty certain that when I tried the same script at work (where I have Safari 5.0.2 etc), it fired the drop event (going to check it tomorrow to be sure) and gave me the FileReader-related errors that were expected. But when I just installed Safari 5.1 on my own PC, I only get dragover, enter and leave events (and drop too if the file was dragged into the browser).

I've been Googling for some time now and don't seem to find a single example of drag and drop that actually works in Safari 5.1. Even Safari's dev-centre's sample doesn't work, let alone html5demo.com 1 and html5demo.com 2. This leads me to think whether the Safari has a bug, or maybe they have implemented something mandatory that isn't reflected in the dev-centre (last updated in 2009).

The script I'm trying to fix is at my site (sorry guys, no problem specific code to post, as it seems to be broken elsewhere too).

PS! I might have introduced some bugs into my own site while desperately trying to fix the drag and drop in Safari, but I'm too tired to fix them right now.

UPDATE: Just confirmed at work that the drop event does fire in Safari 5.0.2 on Mac OS X.

UPDATE 2: Also confirmed that everything works perfectly fine with Safari 5.0.6 on Win 7, the same computer that fails with 5.1

解决方案

Testing with Safari 5.1.7 Mac:

To see the drop event fire, you have to handle the dragover event and call event.preventDefault().

Here's the (quite entertaining) discussion where I found the answer:

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

I don't know if this really solves the question because the asker's site (at least as of today) does this. It works fine on my machine (as do the HTML5 demo pages). But this may help someone coming to this thread with this problem who doesn't know about this rather unintuitive implementation detail.

这篇关于Safari 5.1破坏HTML本机拖放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！