CODEWITHSUNDEEP
javascripthtmlgwtdrag-and-dropuibinder
Michael
Michael

Reputation: 33317

GWT-Drag and Drop for draggable Viewport

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:

enter image description here

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:

enter image description here

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:

enter image description here

What the user actually sees is the following:

enter image description here

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?

I created a project with the code here: https://github.com/confile/test5

Upvotes: 4

Views: 976

Answers (1)

Gal Samuel
Gal Samuel

Reputation: 493

You can try a different layering:

layer 0: canvas not dragable (base frame constraining the view port)

layer 1: the map - draggable (with sides snapping to the canvas layer)

layer 2: the view port - draggable (via some handle or via its frame constrained to canvas area)

Upvotes: 2

Related Questions