Przeciągnij i upuść w GWT 2.4

Question

Mam niestandardowy widget, który jest w rzeczywistości obraz, i chciałbym móc przeciągnąć go wewnątrz AbsolutePanel i uzyskać jego współrzędne za każdym razem. Chciałbym użyć nowego DND API z GWT 2.4, ale mam trudności z jego implementacją. Czy ktoś może zaproponować podstawowe kroki, które muszę podjąć?

Answer 1

Nowe API DnD wprowadzone za pomocą GWT 2.4 obecnie nie obsługuje AbsolutePanel (zobacz implementacje interfejsu HasAllDragAndDropHandlers). Patrząc na implementację FocusPanel nie powinno być zbyt trudno włączyć go dla innych paneli.

Oto krótki dowód pojęcia o tym, jak rozwiązać problem:

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

I tu panel zwyczaj

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

i klasa zdjęcie:

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