拖放在GWT 2.4

问题描述

我有一个实际上是一个图像的自定义小部件，我希望能够在AbsolutePanel中拖动它，并且每次都得到它的坐标。我想使用来自GWT 2.4的新的DND API，但我很难实现它。有人可以提出我必须采取的基本步骤吗？

I have a custom widget that is actually an image, and i would like to be able to drag it inside an AbsolutePanel and get its coordinates every time. I would like to use the new DND API from GWT 2.4, but i'm having a hard time to implement it. Can someone propose the basic steps i must take?

推荐答案

使用GWT 2.4引入的新DnD API目前不支持 AbsolutePanel （请参阅 HasAllDragAndDropHandlers 接口的实现）。看看 FocusPanel 的实现，不应该太难以为其他面板启用。

The new DnD API introduced with GWT 2.4 doesn't currently support the AbsolutePanel (see the implementations of the HasAllDragAndDropHandlers interface). Looking at the implementation of FocusPanel it shouldn't be too hard to enable it for other panels.

这是一个快速证明如何解决您的问题：

Here's a quick proof of concept on how to solve your problem:

public void onModuleLoad() {
    DragImage image = new DragImage();
    image.setUrl(Resources.INSTANCE.someImage().getSafeUri());
    final DropAbsolutePanel target = new DropAbsolutePanel();
    target.getElement().getStyle().setBorderWidth(1.0, Unit.PX);
    target.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    target.getElement().getStyle().setBorderColor("black");
    target.setSize("200px", "200px");

    // show drag over effect
    target.addDragOverHandler(new DragOverHandler() {

        @Override
        public void onDragOver(DragOverEvent event) {
            target.getElement().getStyle().setBackgroundColor("#ffa");
        }
    });

    // clear drag over effect
    target.addDragLeaveHandler(new DragLeaveHandler() {

        @Override
        public void onDragLeave(DragLeaveEvent event) {
            target.getElement().getStyle().clearBackgroundColor();
        }
    });

    // enable as drop target
    target.addDropHandler(new DropHandler() {

        @Override
        public void onDrop(DropEvent event) {
            event.preventDefault();
            // not sure if the calculation is right, didn't test it really
            int x = (event.getNativeEvent().getClientX() - target.getAbsoluteLeft()) + Window.getScrollLeft();
            int y = (event.getNativeEvent().getClientY() - target.getAbsoluteTop()) + Window.getScrollTop();
            target.getElement().getStyle().clearBackgroundColor();
            Window.alert("x: " + x + ", y:" + y);
            // add image with same URL as the dropped one to absolute panel at given coordinates
            target.add(new Image(event.getData("text")), x, y);
        }
    });

    RootPanel.get().add(image);
    RootPanel.get().add(target);
}

这里的自定义面板

public class DropAbsolutePanel extends AbsolutePanel implements HasDropHandlers, HasDragOverHandlers,
        HasDragLeaveHandlers {

    @Override
    public HandlerRegistration addDropHandler(DropHandler handler) {
        return addBitlessDomHandler(handler, DropEvent.getType());
    }

    @Override
    public HandlerRegistration addDragOverHandler(DragOverHandler handler) {
        return addBitlessDomHandler(handler, DragOverEvent.getType());
    }

    @Override
    public HandlerRegistration addDragLeaveHandler(DragLeaveHandler handler) {
        return addBitlessDomHandler(handler, DragLeaveEvent.getType());
    }
}

和图像类：

public class DragImage extends Image {

    public DragImage() {
        super();
        initDnD();
    }

    private void initDnD() {
        // enables dragging if browser supports html5
        getElement().setDraggable(Element.DRAGGABLE_TRUE);
        addDragStartHandler(new DragStartHandler() {

            @Override
            public void onDragStart(DragStartEvent event) {
                // attach image URL to drag data
                event.setData("text", getUrl());
            }
        });
    }
}

这篇关于拖放在GWT 2.4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！