1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
|
public class MyWidget extends AbsolutePanel{
private Image img = new Image("http://www.icone-png.com/png/36/36049.png");
public MyWidget() {
DragImage image = new DragImage();
image.setUrl(img.getUrl());
final DropAbsolutePanel target = new DropAbsolutePanel();
target.getElement().getStyle().setBorderWidth(2.0, Unit.PX);
target.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
target.getElement().getStyle().setBorderColor("black");
target.setSize("400px", "400px");
target.add(new Label("url : " + img.getUrl()));
// show drag over effect
target.addDragOverHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
target.getElement().getStyle().setBackgroundColor("#00f");
}
});
// 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 + " url:" + event.getDataTransfer().getData("text"));
// add image with same URL as the dropped one to absolute panel at given coordinates
target.add(new Image(event.getDataTransfer().getData("text")), x, y);
}
});
this.add(image);
this.add(target);
}
} |