2013-11-04 191 views
4

我使用GWT-dnd使視口可拖動。視口是固定大小的窗口,顯示較大的地圖的一部分。如下圖所示:GWT拖放可拖動的視口

enter image description here

我跟着這個帖子:Move ViewPort of Element Map in GWT?工作正常,但我無法得到它得到與GWT-DND工作。 GWT-DND。

我創建了以下簡單的場景:

​​

我的問題是,我可以GWT-DND化妝工作只有在拖動面板比託板更小。在我的情況下,地圖(畫布)是黃色的框,比視口大得多。如果我將視口作爲拖放區域並且可拖動地圖,則不起作用。當我嘗試拖動地圖時,它將通過視口的一個邊界進行調整,就是這樣。

想要的是以下內容:什麼時候拖動地圖(地圖在視口中可見的部分)比地圖的位置應該改變。例如,當我拖動地圖下來,我得到了我展示如下圖:

enter image description here

用戶實際看到的是以下幾點:

enter image description here

這裏是我做過什麼在我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

回答

2

可以嘗試不同的分層:

層0:帆布不dragable(基幀約束視圖端口)

層1 :地圖 - 可拖動(雙面貼着畫布層)

第2層:視圖端口 - 可拖動(通過某個手柄或通過其框架限制到畫布區域)

+0

你能否請張貼一些示例代碼? – confile

+0

請在這裏發佈鏈接到您的項目文件,我會看看我是否可以調整它.. –

+0

我在這裏創建了一個項目:https://github.com/confile/test5 – confile