java - 使用 gwt-dnd 拖放时 GWT 小部件会分解

Question

所以，我很难解释我的问题，我希望这是清楚的。请告诉我是否可以更好地澄清一些事情!

我有一个 GWT Web 应用程序，它使用 gwt-dnd 来拖放小部件。我有 Notecard 对象(如 3x5 笔记卡)，它们扩展 AbsolutePanel 并在其上显示标题和编号。

我有一个垂直的 InsertPanel(一个 gwt FlowPanel)，Notecard 对象插入其中，一个在下一个(这里顺序很重要)。假设 InsertPanel 中包含 5 个记事卡，全部垂直对齐。如果我拿起其中一个，将其移动到 InsertPanel 中的不同索引，然后将其放下，则记事卡的正文将被放在应有的位置，但标题和编号将与记事卡的正文分离并一直推到 InsertPanel 的顶部。如果我继续移动记事卡，所有记事卡主体都会按计划运行，但所有标题和数字都堆叠在 InsertPanel 的最顶部。

我是否遗漏了一些将记事卡小部件组件“粘合”在一起的东西？我尝试让 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);
}

我还使用我实现的放置 Controller 来处理 onDrop() 事件。但它只是使用了 onDrop() 的 AbstractInsertPanelDropController 实现，然后添加了一些持久机制的功能。

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 相关。我所做的只是向 Notecard 包装器添加 CSS 样式，以确保其子项与其相关:

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

然后一切都表现得很好。

我使用 Firefox 的 Firebug 解决了这个问题，然后通过 Google 搜索了 CSS 问题。