GWT widget is breaking apart when dragged and dropped with gwt-dnd

Question

So, I am having a very difficult time explaining my problem, I hope this is clear. Please tell me if I can clarify anything a little bit better!

I have a GWT web application that is using gwt-dnd to drag and drop widgets. I have Notecard objects (like 3x5 note cards) that extend AbsolutePanel and have a title and number displayed on them.

I have a vertical InsertPanel (a gwt FlowPanel) that Notecard objects are inserted into, one above the next (order matters here). Say there are 5 Notecards contained in the InsertPanel, all aligned vertically. If I pick one of them up, move it to a different index in the InsertPanel, and drop it, the body of the Notecard is dropped where it is supposed to be, but then the title and number are separated from the body of the Notecard and are pushed all the way up to the top of the InsertPanel. If I continue to move Notecards around, all the Notecard bodies function as planed, but all the titles and numbers are stacked on top of each other at the very top of the InsertPanel.

Is there something that I am missing that "glues" the Notecard widget components together? I tried having Notecard extend Composite instead of AbsolutePanel, but I am getting the same behavior.

For reference, I have attached the involved Notecard class below:

Notecard.java:

public class Notecard extends AbsolutePanel implements HasAllMouseHandlers {

private Long ID;
private String storyTitle;
private int points;
private Button dragHandleButton;

private AbstractProject project;

/*
 * Constructors
 */
public Notecard( Long Id, String ttl, int pts ) {
    this.ID = Id;
    this.storyTitle = ttl;
    this.points = pts;

    setStyleName("Notecard-Wrapper");
    setSize("100px", "60px");

    Label titleLabel = new Label(storyTitle);
    titleLabel.setStyleName("Notecard-TitleLabel");
    add(titleLabel, 0, 0);
    titleLabel.setSize("96px", "28px");

    Label pointsLabel = new Label("" + points);
    pointsLabel.setStyleName("Notecard-PointsLabel");
    add(pointsLabel, 0, 35);
    pointsLabel.setSize("100px", "20px");

    dragHandleButton = new Button("");
    dragHandleButton.setText("");
    dragHandleButton.setStyleName("dragHandleButton");
    add(dragHandleButton, 0, 0);
    dragHandleButton.setSize("100px", "60px");

    Button addTaskButton = new Button("+");
    addTaskButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            popupAddTaskPopup();
        }
    });
    addTaskButton.setStyleName("Notecard-AddTaskButton");
    addTaskButton.setText("+");
    add(addTaskButton, 0, 40);
    addTaskButton.setSize("20px", "20px");
}

public void popupAddTaskPopup() {
    project.popupAddTaskPopupPanel( ID );
}

/*
 * GETTERS & SETTERS
 */
public String getStoryTitle() {
    return storyTitle;
}

public void setStoryTitle(String title) {
    this.storyTitle = title;
}

public int getPoints() {
    return points;
}

public void setPoints(int points) {
    this.points = points;
}

public Long getID() {
    return ID;
}

public Button getDragHandle() {
    return dragHandleButton;
}

/*
 * Implementation for HasAllMouseHandlers
 */
@Override
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
    return dragHandleButton.addMouseDownHandler(handler);
}
@Override
public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
    return dragHandleButton.addMouseUpHandler(handler);
}
@Override
public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
    return dragHandleButton.addMouseOutHandler(handler);
}
@Override
public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
    return dragHandleButton.addMouseOverHandler(handler);
}
@Override
public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
    return dragHandleButton.addMouseMoveHandler(handler);
}
@Override
public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) {
    return dragHandleButton.addMouseWheelHandler(handler);
}

I am also using a drop controller that I implemented to handle the onDrop() event. But it just uses the AbstractInsertPanelDropController implementation for onDrop() and then adds some functionality for persistence mechanisms.

Oh, I just realized that it may help out if people could just see the problem. This application is actually running on the Google App Engine right now at csci3308-csci4448-finalproject.appspot.com. You have to have a Google account to use it, but at least you can see the problem. Just create a new User Story and then try to drag it into the Backlog. — Jacob

Jacob Jacob · Accepted Answer · 2011-11-30T21:10:30

I figured out the problem. Turns out it was not at all a GWT or drag and drop thing. It was a CSS issue. My Notecard class, you will notice, is made up of an AbsolutePanel and then its child elements are all positioned absolutely. For the original drawing of the widget, GWT is smart enough to make the child elements be placed inside of the Notecard's wrapper (the AbsolutePanel). But when the Notecard was drag and dropped, it was just standard js, not GWT. Thus, the CSS properties for the child widgets that said:

/* CSS for child widgets */
position: absolute;
left: 0;
top: 0;

were no longer relative to the Notecard wrapper, but instead to the RootPanel. All I did was add a CSS style to the Notecard wrapper to make sure its children were relative to it:

/* CSS for Notecard-Wrapper */
position: relative;

and then everything behaved great.

I figured this out using Firebug for Firefox and then Google'ing around about the CSS issue.

GWT widget is breaking apart when dragged and dropped with gwt-dnd

1 Answers