在 Internet Explorer 9 中进行 Dart HTML5 拖放
Posted
技术标签:
【中文标题】在 Internet Explorer 9 中进行 Dart HTML5 拖放【英文标题】：Dart HTML5 Drag and Drop in Internet Explorer 9 【发布时间】：2013-05-18 01:57:52 【问题描述】：我正在尝试使用 Dart 实现 HTML5 拖放。为了让拖放在 IE9 中使用链接和图像以外的元素工作，我使用了一种解决方法（参见 Internet Explorer 9 Drag and Drop (DnD) 和 this live example）。
我在 Dart 中使用如下代码：
/**
* Workaround to enable drag-and-drop elements other than links and images in
* Internet Explorer 9.
*/
void _enableIE9drag(Element element)
element.onSelectStart.listen((MouseEvent event)
// Prevent selection of text.
event.preventDefault();
// This should be a native call to dragDrop()
element.dragDrop();
);
对element.dragDrop() 的调用应该是IE9 的原生javascript 调用。而dart2js 将方法调用编译为dragDrop$0()。
如果我手动编辑生成的 js 输出并删除 $0，一切都会在 IE9 中正常运行。
那么，如何调用IE9原生的dragDrop()javascript函数呢？
编辑
按照 Greg 的建议，我打开了 bug 10837，希望我们可以摆脱与 dart:html 的浏览器不一致问题。
【问题讨论】：
【参考方案1】：dragDrop() 不是 Dart Element 类中的方法，因此您不能调用它。
您是否尝试过使用Element 类中定义的拖放事件？ Dart 提供了 shims 以使这些在 IE9 中工作。
如果您无法使用 Dart 的拖放 api 跨浏览器工作，那么您应该提交一个错误。
【讨论】：
Element 的拖放事件在 IE9 中确实有效，但仅适用于 image 和 link 标签。调用dragDrop() 的解决方法可以拖动其他元素，例如 divs。
啊-对，我以为您正在尝试进行文件拖放。为了拖动 div，我只处理鼠标事件，并使用 css transform translate。原生拖放 api 在浏览器中的行为不同。【参考方案2】：
通过在我的主要 HTML 文件管理器中添加一些 javascript 找到了解决方案（如果您有更好的想法，请告诉我）：
<html>
<head>
<!-- some stuff -->
<script type="text/javascript">
function callDragDrop(el)
el.dragDrop();
</script>
</head>
<body>
<!-- some stuff -->
</body>
</html>
现在我可以用 Darts js-interop 调用这个函数了：
/**
* Workaround to enable drag-and-drop elements other than links and images in
* Internet Explorer 9.
*/
void _enableIE9drag(Element element)
if (element.draggable == null)
// HTML5 draggable support is not available --> try to use workaround.
element.onSelectStart.listen((MouseEvent event)
// Prevent selection of text.
event.preventDefault();
// Use the javascript function to call the native dragDrop() of element
js.context.callDragDrop(element);
);
编辑
创建了一个帮助库以在 Dart 中使用 HTML5 Drag and Drop。
【讨论】：
不幸的是，JS 互操作包给生成的 js 代码增加了很多开销——所以要小心使用。理想情况下，Dart 应该能够在 dart:html 中解决这些类型的跨浏览器不一致。我建议提交一个错误。 dartbug.com @Greg：你是对的。这里是Issue 10837 FWIW - 我用 javascript 编写了一些不同的拖放交互。 IE。将 DOM 元素移动到目标。我最初使用本机 dnd，但发现与叠加图像的绘制方式不一致（以及其他我忘记的事情）。最后，我只使用 DOM 和鼠标事件重写了它。这是我获得所需精确控制的唯一方法。我认为这就是圆圈拖放在 g+ 中的工作方式。 几乎放弃了尝试实现跨浏览器拖动图像...但后来找到了一个可以使用 SVG 图像的解决方案。我在上面的答案中包含了一个指向我创建的 Dart 库的链接，以使使用 HTML5 拖放更加舒适。 @Greg：现在HTML5 Drag and Drop 库中支持触摸事件。以上是关于在 Internet Explorer 9 中进行 Dart HTML5 拖放的主要内容，如果未能解决你的问题，请参考以下文章
在 Internet Explorer 9 中更改域名后，Ajax 停止工作
Internet Explorer 9 - 按比例调整图像大小
为啥我的表单不能在 Internet Explorer 9 中上传文件？
在 Internet Explorer 9+ 中使用 IUIAutomation 自动另存为文件