4

我使用GWT-dnd使视口可拖动。视口是固定大小的窗口，显示较大地图的一部分。如下图所示：

在此处输入图像描述

我关注了这篇文章：在 GWT 中移动元素映射的视口？这工作正常，但我无法让它与 GWT-dnd 一起工作。GWT-dnd。

我创建了以下简单场景：

在此处输入图像描述

我的问题是，只有在拖动面板小于下拉面板时，我才能 GWT-dnd 工作。在我的例子中，地图（画布）是黄色框，比视口大得多。如果我将视口设置为放置区域并且地图可拖动，则它不起作用。当我尝试拖动地图时，它将根据视口的一个边界进行调整，仅此而已。

想要的是以下内容：何时拖动地图（在视口中可见的地图部分）比地图的位置应该改变。例如，当我向下拖动地图时，我得到了下图中显示的内容：

在此处输入图像描述

用户实际看到的是以下内容：

在此处输入图像描述

这是我在 ScreenView.ui.xml 文件中所做的：

    <g:AbsolutePanel ui:field="viewport" addStyleNames="{resources.screenCss.viewportContainer}">
        <g:FocusPanel ui:field="canvasFocus"
                        addStyleNames="{resources.screenCss.focusPanel}">
            <g:AbsolutePanel ui:field="canvas"
                        addStyleNames="{resources.screenCss.canvas}">

                    <g:HTMLPanel  addStyleNames="{resources.screenCss.mapContainer}">

                        <g:FlowPanel ui:field="test1" addStyleNames="{resources.screenCss.test1}">
                            <g:HTML>test1</g:HTML>
                        </g:FlowPanel>

                        <g:FlowPanel ui:field="test2" addStyleNames="{resources.screenCss.test2}">
                            <g:HTML>test2</g:HTML>
                        </g:FlowPanel>

                    </g:HTMLPanel>


            </g:AbsolutePanel>
        </g:FocusPanel>
    </g:AbsolutePanel>

在我的 ScreeView.java 中，我这样做：

@UiField
AbsolutePanel viewport;

@UiField
AbsolutePanel canvas;

@UiField
FlowPanel test1;

private PickupDragController dragController;
private DropController dropController;

    // create drag controller
dragController = new PickupDragController(viewport, true);

    // create drop controller 
    dropController = new AbsolutePositionDropController(canvas);
    dragController.registerDropController(dropController);

    // make test1 draggable
    FocusPanel focusPanel = new FocusPanel();
focusPanel.addStyleName(resources.screenCss().noteFocusPanel());
test1.add(focusPanel);
    canvas.add(test1);
    dragController.makeDraggable(test1, focusPanel);

现在我有一个可拖动的红色矩形。

如何使我的地图（画布）可拖动？

我在这里用代码创建了一个项目：https ://github.com/confile/test5

4

1 回答 1

2

您可以尝试不同的分层：

第 0 层：画布不可拖动（限制视口的基本框架）

第 1 层：地图 - 可拖动（侧面与画布层对齐）

第 2 层：视口 - 可拖动（通过某个句柄或通过其框架约束到画布区域）

于 2013-11-07T22:28:52.267 回答