Java 在GWT中移动元素贴图的视口？

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

如何设置视口和元素贴图以使其可以拖动和移动？

---

使用方法

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);
 }
}

看

---

更多例子-

看看这本书，我向你们推荐。对于你想做的事情，有一步一步的说明

---

使用方法

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);
 }
}

看

---

更多例子-

看看这本书，我向你们推荐。对于你想做的事情，有一步一步的说明

---

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

图书馆已经准备好了，看看他们的

[编辑]使用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的示例

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");

}

---

您可以将html主体设置为拖动和移动，而不是移动视口。因此，将视口设置为静态和htmlmoveable@AkshayKhandelwal你能给我发一个代码示例吗？我不知道GWT，但是如果你愿意，我可以帮助你使用HTMLwant@AkshayKhandelwal是的，一个js提琴会很棒，或者一些代码。你能分享你的渲染HTML吗？你可以将HTML的主体设置为拖动和移动，而不是移动视口。因此，将视口设置为静态和htmlmoveable@AkshayKhandelwal你能给我发一个代码示例吗？我不知道GWT，但是如果你愿意，我可以帮助你使用HTMLwant@AkshayKhandelwal是的，一个js提琴或一些代码会很棒。你能分享你的呈现HTML吗？但我不使用mgwt。你有其他解决方案吗？mgwt是一个3party库，因此你可以将它包括在内，并使用你需要的东西，就像你应用程序中的任何其他组件一样。GWT会处理掉你不用的任何东西。不管怎样，我在回答中指出的是，您有一个gwt小部件可以使用，您可以使用它，也可以从mgwt复制一些代码来创建自己的小部件。这正是我发布的代码所要做的。使用

html

面板添加此元素中所需的所有内容，或者使用所需的小部件替换

html

，在您的示例中是

元素映射

，但我不使用mgwt。你有其他解决方案吗？mgwt是一个3party库，因此你可以将它包括在内，并使用你需要的东西，就像你应用程序中的任何其他组件一样。GWT会处理掉你不用的任何东西。不管怎样，我在回答中指出的是，您有一个gwt小部件可以使用，您可以使用它，也可以从mgwt复制一些代码来创建自己的小部件。这正是我发布的代码所要做的。使用

html

面板添加此元素中所需的所有内容，或者使用所需的小部件替换

html

，在您的示例中为

元素映射