在 GWT 中移动元素映射的视口？

Question

我有一个 GWT 应用程序，它的视口显示元素映射的一部分。在元素图上是 div 元素。用户可以在视口（而不是元素）上拖动和移动。如果用户在视口上拖动和移动，则他可以将视口移动到所有方向。这意味着将显示元素映射的另一部分。视口的浏览器位置保持不变，只有元素贴图随着视口的拖放和移动而移动。

我必须如何设置视口和元素映射以使其准备好拖动和移动？

Answer 1

使用方法setWidgetPosition 放置小部件。要在视口中移动视图，请更新它们的位置 -

public class Viewport extends AbsolutePanel {
  private static final String DEFAULT_MOUSE_DOWN_CURSOR = "moveCursor";
  private static final String DEFAULT_MOUSE_DRAG_CURSOR = "pointerCursor";

  private final FocusPanel panel = new FocusPanel();

  private String mouseDownCursor = DEFAULT_MOUSE_DOWN_CURSOR;
  private String mouseDragCursor = DEFAULT_MOUSE_DRAG_CURSOR;

  private Widget view = null;

  private boolean dragging = false;
  private int xOffset, yOffset;

  private boolean eventPreviewAdded = false;

  private static EventPreview preventDefaultMouseEvents = new EventPreview() {
      public boolean onEventPreview(Event event) {
        switch (DOM.eventGetType(event)) {
           case Event.ONMOUSEDOWN:
           case Event.ONMOUSEMOVE:
             DOM.eventPreventDefault(event);
        }
        return true;
      }
    };

  public Viewport() {
    add(panel);

    panel.addMouseListener(new MouseListenerAdapter() {
      public void onMouseEnter() {
       DOM.addEventPreview(preventDefaultMouseEvents);
      }

      public void onMouseLeave() {
       DOM.removeEventPreview(preventDefaultMouseEvents);
      }

      public void onMouseDown(Widget widget, int x, int y) {
        dragging = true;

        xOffset = x;
        yOffset = y;

        DOM.setCapture(panel.getElement());
      }

      public void onMouseMove(Widget widget, int x, int y) {
        if (dragging) {
          removeStyleName(mouseDownCursor);
          addStyleName(mouseDragCursor);

          int newX = x + getWidgetLeft(panel) - xOffset;
          int newY = y + getWidgetTop(panel) - yOffset;

          setWidgetPosition(panel, newX, newY);
        }
      }

      public void onMouseUp(Widget widget, int x, int y) {
        if (dragging) {
          dragging = false;
          removeStyleName(mouseDownCursor);
          removeStyleName(mouseDragCursor);

          DOM.releaseCapture(panel.getElement());
        }
      }
    });
  }

  public String getMouseDownCursor() {
    return mouseDownCursor;
  }

  public void setMouseDownCursor(String mouseDownCursor) {
    this.mouseDownCursor = mouseDownCursor;
  }

  public String getMouseDragCursor() {
    return mouseDragCursor;
  }

  public void setMouseDragCursor(String mouseDragCursor) {
   this.mouseDragCursor  = mouseDragCursor;
  }

 public Widget getView() {
  return view;
 }

 public void setView(Widget view) {
   this.view = view;
   panel.setWidget(view);
 }
}

见Google Web Toolkit Solutions: More Cool & Useful Stuff

---

更多示例 -

• Solution 4. Viewports and Maps
• http://www.salvin.in/
• GWT Canvas Demo

看this这本书，我推荐给你。有关于您想要做什么的分步说明。

Answer 2

也许您需要一个小部件来使用拖动或点击事件向任何方向滚动。

mgwt 库为此准备了 ScrollPanel，看看他们的 example。

[已编辑] 使用 mgwt 的示例

import com.googlecode.mgwt.ui.client.widget.LayoutPanel;
import com.googlecode.mgwt.ui.client.widget.RoundPanel;
import com.googlecode.mgwt.ui.client.widget.ScrollPanel;

public void onModuleLoad() {

  // You need to use both widgets mgwt-LayoutPanel and mgwt-ScrollPanel:
  LayoutPanel main = new LayoutPanel();
  ScrollPanel scrollPanel = new ScrollPanel();

  // This is optional, you can use any gwt-Panel instead
  RoundPanel roundPanel = new RoundPanel();

  scrollPanel.setWidget(roundPanel);
  main.add(scrollPanel);
  RootPanel.get().add(main);


  StringBuffer buffer = new StringBuffer();
  for (int i = 0; i < 500; i++) {
      buffer.append("Lorem ipsum dolor sit amet, consectetur adipiscing elit");
  }
  HTML html = new HTML(buffer.toString());

  roundPanel.add(html);

  // Set the size of your view-port and its content
  main.setSize("400px", "400px");
  html.setWidth("1000px");

}

您必须在您的类路径中包含mgwt library 并在您的.gwt.xml 文件中设置这些行：

<inherits name="com.googlecode.mgwt.MGWTMin"/>
<set-property name="mgwt.os" value="desktop" />
<set-property name="mobile.user.agent" value="not_mobile" />