Виджет GWT разваливается при перетаскивании с помощью gwt-dnd

Question

Итак, мне очень трудно объяснить мою проблему, надеюсь, это понятно.Скажите, пожалуйста, могу ли я что-нибудь прояснить немного лучше!

У меня есть веб-приложение GWT, использующее gwt-dnd для перетаскивания виджетов.У меня есть объекты Notecard (например, карты заметок 3x5), которые расширяют AbsolutePanel и на них отображаются заголовок и номер.

У меня есть вертикальная вставка InsertPanel (gWt FlowPanel), в которую вставляются объекты Notecard, один над следующим(порядок имеет значение здесь).Скажем, в InsertPanel содержится 5 карточек для заметок, все выровнены по вертикали.Если я выберу один из них, переместу его в другой индекс в InsertPanel и урону, тело Notecard будет сброшено там, где оно должно быть, но затем название и номер будут отделены от тела Notecardи подталкиваются до самого верха вставной панели.Если я продолжу перемещать Notecards, все тела Notecard будут функционировать в соответствии с планом, но все заголовки и номера будут накладываться друг на друга в самом верху InsertPanel.

Есть ли что-то, чего мне не хватаетчто "склеивает" компоненты виджета Notecard вместе?Я пытался использовать Notecard, расширять Composite вместо AbsolutePanel, но у меня такое же поведение.

Для справки я прикрепил соответствующий класс Notecard ниже:

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

Я также использую контроллер перетаскивания, который я реализовал для обработки события onDrop ().Но он просто использует реализацию AbstractInsertPanelDropController для onDrop (), а затем добавляет некоторые функциональные возможности для механизмов персистентности.

Answer 1

Я разобрался в проблеме.Оказывается, это был вовсе не GWT или перетаскивание.Это была проблема CSS.Вы заметите, что мой класс Notecard состоит из AbsolutePanel, а затем все его дочерние элементы располагаются абсолютно.Для первоначального рисования виджета GWT достаточно умен, чтобы дочерние элементы помещались в оболочку Notecard (AbsolutePanel).Но когда Notecard перетаскивали, это был просто стандартный js, а не GWT.Таким образом, свойства CSS для дочерних виджетов, в которых говорилось:

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

, больше не относились к оболочке Notecard, а вместо этого к RootPanel.Все, что я сделал, это добавил CSS-стиль в оболочку Notecard, чтобы убедиться, что его дочерние элементы были относительно него:

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

, а затем все стало хорошо.

Я понял это с помощью Firebug дляFirefox и затем Google обсуждают проблему CSS.