CODEWITHSUNDEEP
gwtlabeldrag-and-drop
Tom
Tom

Reputation: 845

In Gwt Drag and Drop, how to drop a widget into a right position of a VerticalPanel that already has many labels on it?

Ok, let say, you got a label, you got a VerticalPanel that has many labels on it. See this code:

// Make the widget draggable.
Label w = new Label("OutSide Label");
w.getElement().setDraggable(Element.DRAGGABLE_TRUE);

// Add a DragStartHandler.
w.addDragStartHandler(new DragStartHandler() {
  @Override
  public void onDragStart(DragStartEvent event) {
    // Required: set data for the event.
    event.setData("text", "Hello World");
    // Optional: show a copy of the widget under cursor.
    event.getDataTransfer().setDragImage(w.getElement(), 10, 10);
  }
});

VerticalPanel vp=nw VerticalPanel();
vp.add(new Label("l1");
vp.add(new Label("l2"); 
vp.add(new Label("l3"); 

vp.addDomHandler(new DragOverHandler() {
  public void onDragOver(DragOverEvent event) {
    vp.getElement().getStyle().setBackgroundColor("#ffa");
  }
}, com.google.gwt.event.dom.client.DragOverEvent.getType());

vp.addDomHandler(new DropHandler() {            
  @Override
  public void onDrop(com.google.gwt.event.dom.client.DropEvent event) {
    // TODO Auto-generated method stub
    event.preventDefault();
    // Get the data out of the event.
    String data = event.getData("text");
    //Window.alert(data);
    /// WE NEED TO FILL IN THE MISSING CODE HERE
    /// WE NEED TO FILL IN THE MISSING CODE HERE
  }
}, DropEvent.getType());

how to code so that when user drag the outside label into the area of VerticalPanel, if the outside label was dragged between the existing widgets, it will be inserted into the between of existing labels on VerticalPanel, Ex if the outside label was drag between "l1" & "l2", the vp will show:
l1
OutSide Label
l2
l3

Upvotes: 1

Views: 1955

Answers (1)

Andrea Boscolo
Andrea Boscolo

Reputation: 3048

Something like the following should theoretically work, although not tested:

p.addDomHandler(new DropHandler() {
  @Override
  public void onDrop(DropEvent event) {
    // Get the target event.
    EventTarget eventTarget = event.getNativeEvent().getEventTarget();
    // Safe check for casting to Element.
    if (Element.is(eventTarget)) {
      Element elementTarget = Element.as(eventTarget);
      // Loop through VerticalPanel's children to find our target.
      for (int i = 0; i < p.getWidgetCount(); ++i) {
        if (p.getWidget(i).getElement().isOrHasChild(elementTarget)) {
          // Insert a new Label with the DataTransfer's data,
          // and remove the old one.
          p.insert(new Label(event.getData("text")), i);
          oldLabelContainer.remove(oldLabel);
          break;
        }
      }
    }
  }
}, DropEvent.getType());

Of course, if you have a lot of labels that loop should be avoided.

Upvotes: 3

Related Questions