GWT-DnD on Viewport and Google Maps like Map

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

I followed this post: Move ViewPort of Element Map in GWT? which works fine, but I could not get it get to work with GWT-dnd. GWT-dnd.

I created the following simple scenario:

My problem is that I could GWT-dnd make working only if the drag panel is smaller than the drop panel. In my case the map (canvas), which is the yellow box, is much bigger than the viewport. If I make the viewport as the drop area and the map draggable then it does not work. When I try to drag the map it will be adjusted by one boundary of the viewport and that's it.

What is want is the following: When is drag the map (the part of the map that is visible in the viewport) than the position of the map should change. 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 my 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 do:

@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 draggable.

How can I make my map (canvas) draggable?

Here is the link to my Stackoverflow question: http://stackoverflow.com/questions/19761185/gwt-drag-and-drop-for-draggable-viewport

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.