Arrastrar y colocar en GWT 2.4

Question

Tengo un widget personalizado que en realidad es una imagen, y me gustaría poder arrastrarlo dentro de un AbsolutePanel y obtener sus coordenadas cada vez. Me gustaría usar la nueva API DND de GWT 2.4, pero me está costando mucho implementarla. ¿Puede alguien proponer los pasos básicos que debo tomar?

Answer 1

La nueva API DnD introducida con GWT 2.4 actualmente no admite el AbsolutePanel (consulte las implementaciones de la interfaz HasAllDragAndDropHandlers). En cuanto a la implementación de FocusPanel, no debería ser demasiado difícil habilitarla para otros paneles.

Aquí está una prueba rápida del concepto sobre cómo resolver su problema:

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

Y aquí el panel personalizado

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

y la clase de imagen:

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