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