GWT - 弹出位置答案

【问题标题】：GWT - popup positionGWT - 弹出位置
【发布时间】：2011-06-22 14:53:30
【问题描述】：

如何将 gwt 中的弹出窗口定位到鼠标位置。我有一个巨大的弹性表，弹性表包含按钮。如果按下按钮，则会出现一个带有一些数据的弹出窗口，但弹出窗口始终出现在页面顶部。如果用户在表格的底部，那么弹出窗口将不在视图中并且他们看不到它？

如何获取鼠标位置的 x 和 y 坐标？

【问题讨论】：

标签： gwt

【解决方案1】：

PopupPanel 类的 showRelativeTo 方法在我的用例中运行良好。

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PopupPanel.PositionCallback;

public class CommentPanelPopupImage extends Image {
    public CommentPanelPopupImage(final int tableId, final String referenceId, final String title) {
        super("external-link-ltr-icon.png");
        setTitle("Click to see comments");
        final CommentPanelPopupImage commentPanelPopupImage = this;
        addClickHandler(new ClickHandler() {

            public void onClick(final ClickEvent event) {
                final CommentPopupPanel popup = new CommentPopupPanel(tableId, referenceId, title);
                popup.setPopupPositionAndShow(new PositionCallback() {

                    public void setPosition(int offsetWidth, int offsetHeight) {
                        popup.showRelativeTo(commentPanelPopupImage);
                    }
                });
            }
        });
    }
}

【讨论】：

【解决方案2】：

要显示弹出窗口，请使用center() 方法而不是show() 方法。这应该会创建一个弹出窗口并将其显示在浏览器视口的中心。

【讨论】：

【解决方案3】：

要获取鼠标位置，您可以从已传递给事件处理函数的事件中使用 getClientX/Y() 或 getScreenX/Y()。

【讨论】：

【解决方案4】：

在你的主面板中添加这个并将坐标保存在全局变量对象中作为静态（？）

main_verticalPanel.addDomHandler(new MouseMoveHandler() {

            @Override
            public void onMouseMove(MouseMoveEvent event) {
                GlobalVars.mouseX = event.getX();
                GlobalVars.mouseY = event.getY();
            }

        }, MouseMoveEvent.getType());

然后从代码中的其他位置获取坐标。

【讨论】：