GWT-Drag and Drop for draggable viewport

Question

I use GWT-dnd to make the viewport draggable. A viewport is a fixed-size window that shows part of a larger map. As shown in the following image:

I followed this post: Move ViewPort map elements to GWT? which works fine, but I could not get it to work with GWT-dnd. GWT-DnD.

I created the following simple script:

My problem is that I could only work GWT-dnd if the drag panel is smaller than the drop panel. In my case, the map (canvas), which is the yellow box, is much larger than the viewport. If I create a viewport as a drag area and the map is dragged, then this will not work. When I try to drag a map, it will be adjusted to one border of the viewing area and that it is.

What you need is the following: When dragging a map (the part of the map that is visible in the viewport), what should change the position of the map. For example, when I drag the map down, I get what I show in the following image:

What the user actually sees is the following:

Here is what I did in the ScreenView.ui.xml file:

    <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>

In my ScreeView.java, I:

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

Now I have a red rectangle that you can drag.

() ?

: https://github.com/confile/test5

Answer 1

:

0: ( , )

1: - ( )

2: - ( , )