IE9上的GWT图像拖放不起作用

Question

我正在使用 GWT 2.5，我想在一个面板中制作一些图像，使其可拖放到另一个面板中。这在 Firefox 上运行良好，但在 IE9 上它就是不想工作。

我几乎整天都在搜索，但没有找到任何解决方案。我发现的最好的线程在这里：

Drag and Drop in GWT 2.4

GWT native drag & drop - DragStartEvent not firing on IE9

不同之处在于我拖动的是图像，而不是标签。所以这可能是问题所在。

所以代码看起来像这样：

// Draggable Image
final Image img = new Image(imageName);
img.addDragStartHandler(new DragStartHandler() {
  @Override
  public void onDragStart(final DragStartEvent event) { 
    event.setData("text", img.getUrl());
  }
});
img.getElement().setDraggable(Element.DRAGGABLE_TRUE);

然后我把它放在我的“源”面板中：

// Image in the source container
wunschContainer = new AbsolutePanel();
img.setPixelSize(size, size);
wunschContainer.add(img, left, top);

图像显示正确（Firefox 和 IE9）

目标面板看起来像这样（它是 AbsolutePanel 的子类，实现了 HasDragOverHandlers 和 HasDropHandlers）

// Event-handlers for the target container.
this.addDragOverHandler(new DragOverHandler() {
  @Override
  public void onDragOver(final DragOverEvent event) {
  }
});

this.addDropHandler(new DropHandler() {
  @Override
  public void onDrop(final DropEvent event) {
    event.preventDefault();
    final String data = event.getData("text");
    /* ... some more handling ..., creates an image to be displayed here */
    add(image, left, top);
  }
});

在 Firefox 中，当我拖动图像时，拖动的图像会显示在鼠标指针下方。在 IE9 上，我根本看不到图像，只有一个符号（带有斜线的圆圈，这个“不允许”符号）。当我松开鼠标按钮时，什么也没有发生。我还用“F12”检查了我使用的是 IE9 模式，没有兼容模式。

我真的不知道问题是什么。代码似乎没问题（适用于 FF）。使用 GWT-Images 制作 DnD 是否有问题？有趣的是，“onDragStart()”方法被触发了。但是“拖动”并没有完成。

哦，我正在使用 GWT 开发模式来测试这个。这会是个问题吗？

我想只使用 GWT 来解决这个问题。或者我应该去使用另一个库，比如 gwt-dnd？有人在 IE9 上获得plain GWT DnD 吗？我不敢相信我是第一个尝试这样做的人:-(。

Answer 1

所以，我尝试了很多东西，最终找到了解决方案。

问题似乎出在“onDragOver()”方法中。正如我在原始问题中发布的那样，该方法的实现是空的：

this.addDragOverHandler(new DragOverHandler() {
  @Override
  public void onDragOver(final DragOverEvent event) {
  }
});

因为这就是我在许多页面中找到的方式。该方法必须存在，否则 Drag n Drop 将不起作用。但似乎对于 IE，我什至需要阻止默认行为（或做其他事情。只是记录该方法不是“某事”）。所以我添加了一个“event.preventDefault();”到该方法，现在它可以工作了。

this.addDragOverHandler(new DragOverHandler() {
  @Override
  public void onDragOver(final DragOverEvent event) {
    event.preventDefault();
  }
});

很奇怪，我在任何地方都找不到此信息。希望这对其他人有用 8-)。

Answer 2

我在使用 GWT 2.6 的 IE9 中遇到了同样的问题，我发现在 onDragStart 中设置数据会使 IE9 关闭。所有其他浏览器都可以正常工作。所以我最终做了以下事情：

        this.addDragStartHandler(new DragStartHandler(){

        @Override
        public void onDragStart(DragStartEvent event) {
            if(!isIE9()){
                event.setData(RangeSliderControl.KEY, key); // This causes IE9 to not work                  
            }
        }}
    );

当然，我已将 isIE9() 方法添加到我的代码中，如下所示：

    /**
* Gets the name of the used browser.
*/
public static boolean isIE9() {
    return (getBrowserName().indexOf("msie 9.0") != -1);
};

/**
* Gets the name of the used browser.
*/
public static native String getBrowserName() /*-{
    return navigator.userAgent.toLowerCase();
}-*/;