Перетащите в GWT 2.4 - PullRequest
Новая
       6

Перетащите в GWT 2.4

13 голосов
/ 12 сентября 2011

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

1 Ответ

12 голосов
/ 29 сентября 2011

Новый 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());
            }
        });
    }
}
...