在GWT中移动元素图的ViewPort？

我有一个带有视口的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解决方案：更酷和实用的东西

---

更多例子 –

• 解决方案4.视口和地图
• http://www.salvin.in/
• GWT Canvas演示

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

Answer 2

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

mgwt库有一个ScrollPanel准备就绪，看看他们的例子 。

[编辑]使用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库 ，并在.gwt.xml文件中设置这些行：