Drag and Drop in GWT - The How-To

The Basics

1. Make an HTML item "floating", so it can be located anywhere on the screen - this is called absolute location on the web page.
2. Make that element draggable by having the Widget respond to mouse events and reflect the mouse movement.
3. Avoid text being selected or images being dragged off the browser window, which is the default behavior of clicking and dragging on an HTML item.

The GWT implementation

public final class DraggableWidgetWrapper
    extends SimplePanel {

  public DraggableWidgetWrapper(Widget inner) {
    add(inner);
    DOM.setStyleAttribute(getElement(), "position", "absolute");
  }
}

1. Sink events to it using the DOM object.

   
     public DraggableWidgetWrapper(Widget inner) {
       add(inner);
       DOM.setStyleAttribute(getElement(), "position", "absolute");
       // We don't want to lose anything already sunk, 
       // so just ORing it to what's already there.
       DOM.sinkEvents(getElement(), 
         DOM.getEventsSunk(getElement()) | Event.MOUSEEVENTS);
     }
   

2. Implement the SourcesMouseEvents interface, usually by using the helper class MouseListenerCollection.

   
   public final class DraggableWidgetWrapper
       extends SimplePanel 
       implements SourcesMouseEvents {
     private MouseListenerCollection mouseListeners = 
       new MouseListenerCollection();
   
     public void addMouseListener(MouseListener l) {
       mouseListeners.add(l);
     }
     
     public void removeMouseListener(MouseListener l) {
       mouseListeners.remove(l);
     }
    // ...
   }
   

3. Override the onBrowserEvent method and fire the mouse events accordingly.

   
   public class DraggableWidgetWrapper 
     extends SimplePanel
     implements SourcesMouseEvents {
     // ... 
   
     public void onBrowserEvent(Event event) {
       switch (DOM.eventGetType(event)) {
         case Event.ONMOUSEDOWN:
         case Event.ONMOUSEUP:
         case Event.ONMOUSEMOVE:
         case Event.ONMOUSEOVER:
         case Event.ONMOUSEOUT:
           mouseListeners.fireMouseEvent(this, event);
           break;
       }
     }
   }
   

4. Implement a MouseListener (usually using MouseListenerAdapter) to set the left and top attributes of the div element.

   
   public class DraggableWidgetWrapper 
     extends SimplePanel
     implements SourcesMouseEvents {
   
     public DraggableWidgetWrapper(Widget widget) {
       add(inner);
       DOM.setStyleAttribute(getElement(), "position", "absolute");
       DOM.sinkEvents(getElement(), 
         DOM.getEventsSunk(getElement()) | Event.MOUSEEVENTS);
       addMouseListener(new DraggableMouseListener());
     }
   
     // ... 
   
     private class DraggableMouseListener 
       extends MouseListenerAdapter {
     
       private boolean dragging = false;
       private int dragStartX;
       private int dragStartY;
   
       public void onMouseDown(Widget sender, int x, int y) {
         dragging = true;
   
         // capturing the mouse to the dragged widget.
         DOM.setCapture(getElement());
         dragStartX = x;
         dragStartY = y;
       }
   
       public void onMouseUp(Widget sender, int x, int y) {
         dragging = false;
         DOM.releaseCapture(getElement());
       }
   
       public void onMouseMove(Widget sender, int x, int y) {
         if (dragging) {
           // we don't want the widget to go off-screen, so the top/left 
           // values should always remain be positive.
           int newX = Math.max(0, x + getAbsoluteLeft() - dragStartX);
           int newY = Math.max(0, y + getAbsoluteTop() - dragStartY);
           DOM.setStyleAttribute(getElement(), "left", newX);
           DOM.setStyleAttribute(getElement(), "top", newY);
         }
       }
     }
   }
   

public class DraggableWidgetWrapper 
  extends SimplePanel
  implements SourcesMouseEvents, EventPreview {

  public DraggableWidgetWrapper(Widget widget) {
    add(inner);
    DOM.setStyleAttribute(getElement(), "position", "absolute");
    DOM.sinkEvents(getElement(), 
      DOM.getEventsSunk(getElement()) | Event.MOUSEEVENTS);
    DOM.addEventPreview(this);
    addMouseListener(new DraggableMouseListener());
  }

  // ... 

  public boolean onEventPreview(Event event) {
    if (DOM.eventGetType(event) == Event.ONMOUSEDOWN && 
        DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event))) {
      DOM.eventPreventDefault(event);
    }
    // Always returning true as we don't want to cancel 
    // the event, just to prevent the default behaviour.
    return true;
  }
}

Some Cosmetics

public final DragDrop {
  public static Widget makeDraggable(Widget widget) {
    return new DraggableWidgetWrapper(widget);
  }
}