GWT Image Drag and Drop on IE9 not working

Question

I'm using GWT 2.5 and I want to make some images in one Panel Draggable and Dropable in another Panel. This is working fine on Firefox, but on IE9 it just don't want to work.

I searched really almost all the day, and didn't find any solution for that. The best threads I found were these here:

Drag and Drop in GWT 2.4

GWT native drag & drop - DragStartEvent not firing on IE9

The difference is that I'm dragging Images, an not Labels. So this could be the problem.

So the code looks something like this:

// 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);

Then I put it in my "source" panel:

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

The Images are displayed correctly (Firefox and IE9)

The Target Panel looks like this (it's a subclass of AbsolutePanel and implements HasDragOverHandlers and 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);
  }
});

In Firefox, when I drag the image, the dragging image is displayed under the mouse pointer. On IE9 I can't see an image at all, just a symbol (circle with a slash on it, this "not allowed" symbol). And when I release the mouse button, then nothing happen. I checked also with "F12" that I was using the IE9-mode, and no compatibility mode.

I really don't know what the problem is. The code seems ok (works on FF). Is there a problem making DnD with GWT-Images? The interesting part is, that the "onDragStart()" methode is being fired. But the "drag" is not being done.

Oh, I'm using GWT devmode to test this. Can this be a problem?

I'd like to solve this using only GWT. Or should I go and use another library, like gwt-dnd? Does anybody got plain GWT DnD working on IE9? I can't believe I'm the first one trying that :-(.

Answer 1

So, I tried really a lot of things, and I came across with a solution.

The problem seems to be in the "onDragOver()" method. As I posted in my original question, I have an empty implementation of the method:

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

As this is how I found in many pages. The method must be present, or else the Drag n Drop wont work. But it seems that for IE I need even to prevent the default behaviour (or do something else. Just logging the method was not "something"). So I added a "event.preventDefault();" to the method, and now it works.

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

Just strange, that I couldn't find this information anywhere. This is hopefully useful for somebody else 8-).

Answer 2

I have been having the same issue with IE9 using GWT 2.6 and I have found that setting the data in the onDragStart puts IE9 off. All other browsers work fine. So I ended up doing the following:

        this.addDragStartHandler(new DragStartHandler(){

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

and off course I have added the isIE9() method to my code as follows:

    /**
* 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();
}-*/;