Question

我正在尝试使用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的不一致。

Answer 1

dragDrop（）不是Dart Element类中的方法，因此您无法调用它。

您是否尝试过使用Element课程中定义的拖放事件？ Dart提供填充程序以使其在IE9中工作。

如果你不能使用Dart的拖放api跨浏览器工作，那么你应该提交一个bug。

Answer 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。

在Internet Explorer 9中使用Dart HTML5拖放功能

修改

2 个答案:

修改