GWT Query DropEvent: can I get the drop coordinates?

Question

I'm using GWT and GWT Query plugin for my web application. I have a draggable image and a GWT Canvas wrapped in a Droppable. My code looks like this:

final Canvas canvas = Canvas.createIfSupported();
    canvas.setHeight("340px");
    DroppableWidget<Canvas> test = new DroppableWidget<Canvas>(canvas);

    test.addDropHandler(new DropEventHandler() {
        @Override
        public void onDrop(DropEvent event) {
            Context2d context = canvas.getContext2d();
            Image img = new Image("image");
            ImageElement i = ImageElement.as(img.getElement());
            //get x and y coordinates out of the drop event
            context.drawImage(i, x, y);
        }

    });

The question is... how can I get these x and y coordinates out of the drop event so I can draw image on the canvas on the drop place?

Answer 1

First you should retrieve your image element via the DropEvent

ImageElement i = ImageElement.as(event.getDraggable());

After that if you want to know where the draggable is dropped (related to the droppable), you can calculate the coordinate like this :

Offest droppableOffset = $(event.getDroppable()).offset();
Offset draggableOffset = $(event.getDraggable()).offset();

int x = draggableOffset.left - droppableOffset.left;
int y = draggableOffset.top - droppableOffset.top;