Перетаскивание в GWT 2.4

У меня есть собственный виджет, который на самом деле является изображением, и я хотел бы иметь возможность перетаскивать его внутри AbsolutePanel и получать его координаты каждый раз. Я хотел бы использовать новый DND API от GWT 2.4, но мне трудно его реализовать. Может кто-то предложить основные шаги, которые я должен предпринять?

Ответ 1

Новый API DnD, представленный с GWT 2.4, в настоящее время не поддерживает AbsolutePanel (см. реализации интерфейса HasAllDragAndDropHandlers). Если посмотреть на реализацию FocusPanel, это не должно быть слишком сложно, чтобы включить его для других панелей.

Вот краткое доказательство того, как решить вашу проблему:

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