使用 gwt dnd 在 GWT 中拖放答案

【问题标题】：Drag and Drop in GWT using gwt dnd使用 gwt dnd 在 GWT 中拖放
【发布时间】：2010-06-09 07:50:42
【问题描述】：

我一直在努力让拖放在 GWT 中工作。过去 3 天，我试图创建一个基本的拖放应用程序，但失败了。目前我可以拖动它，但我无法拖放到任何位置。

我们该如何解决呢？我们是否需要修改 onDragEnd - 我的印象是，除非我特别需要做某事，否则我不必这样做？我很困惑。
另外，如何将下降限制在任何单个区域？我明白我们可以使用 DropController 来做到这一点。但是我已经使用 UiBinder 定义了面板，那么如何让该面板返回到 DropController 中的链接？即 RootPanel.get() 给了我基本的根面板，而不是我想要的实际面板。我尝试了 RootPanel.get("field-id")，但即使该 id 可用，它也显示为 null。我做错了什么？

我写的代码如下：

public class TestPanel extends Composite implements
DragHandler, HasMouseDownHandlers, HasMouseUpHandlers, HasMouseMoveHandlers, HasMouseOutHandlers {

interface Binder extends UiBinder<Widget, TestPanel> { }
private static final Binder binder = GWT.create(Binder.class);

@UiField AbsolutePanel absolutePanel;

private PickupDragController TestDragController;

private Image img = new Image("./testicon.png");

public TestPanel(){
    initWidget(binder.createAndBindUi(this));
    absolutePanel.add(img);
    TestDragController = new PickupDragController(RootPanel.get(), false);
    AbsolutePositionDropController dropController = new AbsolutePositionDropController(
                                                          RootPanel.get());
    TestDragController.registerDropController(dropController);
    TestDragController.addDragHandler(this);
    TestDragController.makeDraggable(this, getDragHandle());
}

private Widget getDragHandle() {
    return img;
}

@Override
public void onDragEnd(DragEndEvent event) { }

@Override
public void onDragStart(DragStartEvent event) { }

@Override
public void onPreviewDragEnd(DragEndEvent event) throws VetoDragException { }

@Override
public void onPreviewDragStart(DragStartEvent event) throws VetoDragException { }

@Override
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
    return addDomHandler(handler, MouseDownEvent.getType());
}

@Override
public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
    return addDomHandler(handler, MouseUpEvent.getType());
}

@Override
public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
    return addDomHandler(handler, MouseMoveEvent.getType());
}

@Override
public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
    return addDomHandler(handler, MouseOutEvent.getType());
}
}

测试面板 uibinder 如下所示：

<g:AbsolutePanel ui:field="absolutePanel" styleName="{style.panel}">
</g:AbsolutePanel>

如果有人可以帮助我，我将非常感激。

P.S：解释一下：我可以通过更新 onDragEnd 来解决第一个问题，如下所示：

    @Override
public void onDragEnd(DragEndEvent event) {
    DragContext context = event.getContext();
    RootPanel.get().add(context.draggable, context.desiredDraggableX, context.desiredDraggableY);
}

但是，我不确定这是否是正确的解决方案 - 因为我认为我不应该自己进行定位。

【问题讨论】：

标签： gwt uibinder drag-and-drop flowpanel

【解决方案1】：

如果您是 GWT dnd 的新手，何不试试working demo？

有很多例子，所有的源代码都可用。

（不，你不应该自己做定位）

【讨论】：

【解决方案2】：

您必须在放置目标上添加一个 DragOverHandler：即使它什么都不做，它也会将组件定义为放置目标。

当然，您仍然需要在此组件上定义 DropHandler（通常还需要定义 DragEnterHandler 和 DragLeaveHandler 用于视觉反馈）。

DragEndHandler 即使没有到达目标也会被调用（在非拖放区域中放弃拖动），它用于更改被拖动对象的状态，您可能需要设置 DropHandler 的通信方式成功拖放到 DragEndHandler（共享变量、EventBus 等）。

【讨论】：