GWTのドラッグアンドドロップ2.4

Question

私は実際には画像であるカスタムウィジェットを持っており、AbsolutePanelの中​​にドラッグして毎回座標を取得できるようにしたいと考えています。 GWT 2.4の新しいDND APIを使用したいと思いますが、実装するのは難しいです。誰かが私が取る必要がある基本的なステップを提案することはできますか？

Answer 1

GWT 2.4で導入された新しいDnD APIは、現在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()); 
      } 
     }); 
    } 
}