html5 拖放在 Windows 的 Safari 浏览器上是不是损坏？

Posted 2023-05-08

【中文标题】html5 拖放在 Windows 的 Safari 浏览器上是不是损坏？

【英文标题】：Is html5 drag and drop broken on safari browser for windows?html5 拖放在 Windows 的 Safari 浏览器上是否损坏？

【发布时间】：2012-03-29 03:25:52

【问题描述】：

在 Safari 浏览器上的 html5 拖放功能是否损坏？如果是这样，有什么解决方法吗？

我在 Windows 7 上使用 Safari 5.1.2，放置目标始终显示为不可放置。在 2 台具有全新安装和最新设置的不同 Windows 7 计算机上进行了尝试。

尝试了这个演示和我自己的代码，它适用于所有其他最新的浏览器。

http://html5demos.com/drag

【问题讨论】：

如果它适用于 Gmail，它应该适用于您。

@Diodeus：通过 Gmail 确认。它根本不显示放置区。而是显示对话框，询问我是否要离开页面。如果我说离开页面，它只是打开拖动的文件。当然，我的问题是关于两个元素之间的浏览器拖放，但我现在可以确认，即使拖放文件也不再起作用了。

【参考方案1】：

Safari 的 D&D 确实不起作用。

Safari 的一种解决方法：

将逻辑放在可拖动对象的 'dragend' 事件中 而是在放置对象的 'drop' 事件中。

【讨论】：

这仍然相关吗？ Can I Use says it is supported now.

你是个聪明的裤子......很好的解决方案！......：D

【参考方案2】：

是的。经过大量的自我怀疑、实验和研究，我可以说它对我来说肯定也坏了（Windows 上的 Safari 5.1.7），截至今天：2012 年 11 月 15 日。这非常令人困惑和痛苦！

希望 Apple 早日参加聚会。

【讨论】：

此外，当您尝试使用空的<div> 对dataTransfer 对象调用setDragImage 时，我在Win Safari 5.1.7 中发现了一个非常讨厌的错误（浏览器崩溃）。没有留下深刻印象。

【参考方案3】：

来自http://html5doctor.com/native-drag-and-drop/#dragging_anything 添加这个：

[draggable=true] 
  -khtml-user-drag: element;

可以通过 jQuery UI 使用非 HTML5 拖放功能： http://jqueryui.com/demos/draggable/

如果您希望它是轻量级的，您可以只使用该特定功能构建下载。

您可以使用 Modernizr 来检测它是否受支持，如果需要，可以使用 jQuery：

if (Modernizr.draganddrop) 
  // Browser supports HTML5 DnD.
 else 
  // Fallback to a library solution.

来自http://www.html5rocks.com/en/tutorials/dnd/basics/

【讨论】：

刚刚检查了html5demos.com/drag的来源，它已经有了这个样式规则。所以不幸的是，它似乎没有效果。我猜测它的浏览器错误，因为它曾经在 5.0.* 版本中工作。

很高兴知道——如果一切都失败了，jQuery UI 将完成这项工作。

-khtml-user-drag hack 在 Windows Safari 5.1.7 上对我不起作用。