首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Safari 5.1打破了HTML本机拖放?

Safari 5.1打破了HTML本机拖放?
EN

Stack Overflow用户
提问于 2011-08-10 04:51:46
回答 3查看 7.1K关注 0票数 18

昨天晚上,我想我应该做一个快速项目来演示HTML5的功能,并尝试一些东西。然而,我似乎不知道如何在Safari中进行拖放操作,而它在Chrome和Firefox中却可以完美地工作。更准确地说,在Safari中似乎不会触发drop事件,当您尝试将网站内部的图像拖动到drop区域时。同时,当你从桌面拖放一个文件时,它也会触发。

我不是很确定,但我非常确定,当我在工作中尝试相同的脚本(在那里我有Safari 5.0.2等)时,它会触发drop事件(明天将检查它以确保),并给出与FileReader相关的预期错误。但是当我刚刚在我自己的PC上安装Safari5.1时,我只能看到拖拽,进入和离开事件(如果文件被拖到浏览器中,也会被删除)。

我已经在谷歌上搜索了一段时间,似乎没有找到一个在Safari5.1中实际有效的拖放示例。甚至Safari的dev-centre's sample都不能工作,更不用说html5demo.com 1html5demo.com 2了。这让我想到Safari是否有一个bug,或者他们实现了一些强制性的东西,而这些东西在dev-centre (上一次更新是在2009年)中没有反映出来。

我正在尝试修复的脚本是在my site上(很抱歉,发布特定代码没有问题,因为它似乎在其他地方也被破坏了)。

又来了!我可能在我自己的网站中引入了一些bug,同时拼命尝试修复Safari中的拖放,但我现在太累了,无法修复它们。

更新:刚刚在工作中确认在Mac上的Safari5.0.2中确实会触发drop事件。

更新2:还确认在Win7上的Safari5.0.6上一切都运行得很好,同一台计算机在5.1下出现故障

EN

回答 3

Stack Overflow用户

发布于 2012-07-16 15:23:38

使用Safari 5.1.7 Mac进行测试:

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

下面是我找到答案的(相当有趣的)讨论:

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

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

票数 8
EN

Stack Overflow用户

发布于 2012-03-30 01:03:30

我在一台Windows7电脑上使用Safari5.1.5 (7534.55.3),这台电脑是我前几天刚安装的,之前没有安装过Safari,而且我无法运行任何在线的HTML5拖放演示。

我正在做一个拖放项目,现代告诉我我可以使用Safari (Modernizr.draganddrop == true),但是当我真的拖放项目时,drop事件不会触发。

我添加了警告调试,但什么也没有添加。

我的测试显示,Windows7 PC drop事件上的Safari 5.1.5 (7534.55.3)被破坏。所有其他拖动事件似乎都有效: dragstart、dragend、dragenter、dragleave、dragover。

票数 5
EN

Stack Overflow用户

发布于 2012-07-13 05:45:23

我遇到了类似的问题,drop事件似乎没有触发。Safari显然希望"dragover“事件也被绑定。一旦我添加了这一点,它就起作用了。所以..。我来分享一下,以防与此相关。

我的第一次尝试:

代码语言:javascript
复制
$(document).bind 
  drop: (e) ->
    // This never gets fired in safari (does work in chrome)
    console.log e.originalEvent.dataTransfer.files
    false

我的“解决办法”:

代码语言:javascript
复制
$(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
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7002832

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档