GWT Drag & Drop Widgets

Question

I am using allen sauer's gwt dnd library to manage a simple drag functionality of gwt widgets across an absolute panel.

While this works fine with simple widgets (like images), I want to do it using my own widget (by extending composite). It simply does not drag & drop the custom widgets when I want it to.

Below you have my code for the custom widget and how they are added to the absolute panel:

package GWTest.artid.client;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;

public class DraggableWidget extends Composite {

    private Image image;

    private Label label = new Label();

    private Button button = new Button("Configure");

    private VerticalPanel panel = new VerticalPanel();

    public DraggableWidget(String imagePath, String labelText, boolean hasButton) {
        super();
        this.image = new Image(imagePath);
        this.label.setText(labelText);

        this.panel.add(image);
        this.panel.add(label);
        if (hasButton) {
            this.panel.add(button);
        }

        initWidget(panel);
    }

    public Image getImage() {
        return image;
    }

    public void setImage(String imagePath) {
        this.image = new Image(imagePath);
    }

    public Label getLabel() {
        return label;
    }

    public void setLabelText(String labelText) {
        this.label.setText(labelText);
    }

    public Button getButton() {
        return button;
    }

    public void setButtonText(String buttonText) {
        this.button.setText(buttonText);
    }
}

In onModuleLoad (COMPUTER_WIDGET and ROUTER_WIDGET are only Strings, paths to image resources):

absolutePanel.setPixelSize(600, 200);
dropController = new AbsolutePositionDropController(absolutePanel);
dragController = new PickupDragController(absolutePanel, true);
dragController.registerDropController(dropController);

DraggableWidget w = new DraggableWidget(DraggableFactory.COMPUTER_WIDGET, "Label 1", false);
DraggableWidget w1 = new DraggableWidget(DraggableFactory.ROUTER_WIDGET, "Label 2", true);

dragController.makeDraggable(w1);
dragController.makeDraggable(w);

dropController.drop(w1, 10, 30);
dropController.drop(w, 10, 30);

Is there anything I'm missing when building these custom widgets?

Hopefully someone with a bit more experience can help me out here...

I am not familiar with drag and drop, but last time I saw something simlar was in GQuery, and in HTML5. Have you checked them? — apanizo
Thanks for your comment, but the reasons for using the dnd library are multiple and we won't be changing that now. I'm still investigating why a "extends composite" acts so differently in an absolute panel and drag/drop controllers from a native GWT widget (like Image or Label...) — Eugen

Eugen Eugen · Accepted Answer · 2014-04-30T14:06:26

I finally found this:

public class MyWidget extends Composite implements HasAllMouseHandlers, HasClickHandlers {

...

      public HandlerRegistration addClickHandler(ClickHandler handler) {
        return addDomHandler(handler, ClickEvent.getType());
      }

      public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
          return addDomHandler(handler, MouseDownEvent.getType());
      }

      public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
        return addDomHandler(handler, MouseMoveEvent.getType());
      }

      public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
        return addDomHandler(handler, MouseOutEvent.getType());
      }

      public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
        return addDomHandler(handler, MouseOverEvent.getType());
      }

      public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
        return addDomHandler(handler, MouseUpEvent.getType());
      }

      public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) {
        return addDomHandler(handler, MouseWheelEvent.getType());
      }

}

This answer: Issue in making composite widget draggable solved my issue and I can use any sort of Composite widgets with dnd now

GWT Drag & Drop Widgets

1 Answers