Question

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

如何设置视口和元素贴图以使其拖动并准备就绪？

enter image description here

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

更多示例 -

请查看this本书，我建议您这样做。有关于您想要做什么的分步说明。

enter image description here

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

在GWT中移动元素图的ViewPort？

2 个答案: