Draggable Component inside a Draggable Component Problems and Label Resizing Problem

[poporogue]

Hi

I have 2 problems about draggable and resizable.

I have a FieldSet, a Label and a TextField
They are all resizable and draggable
Label and TextField are the child elements of FieldSet and they can be only dragged inside the FieldSet
Dragging the FieldSet are also moving the child elements. It means the childs' coordinates are stick to FieldSet
While dragging the Label and TextField, the FieldSet should not be dragged and stay as same position.

I use Draggable and Resizable for those Component shown in the code below.
However, I have fail to do such effect.

My problems are:
1. Cannot resize a Label when the label is located inside the FieldSet
2. When i drag the Label and TextField, the FieldSet is dragged also.
3. It seems that the TextField in the FieldSet cannot be dragged around the FieldSet

For Problem 2, I have tried to use swallowEvent to stop dragging the FieldSet when drag with Label and TextField.
However, I have no clue on how to implement it.

Can anybody give me some hints on this case? Thanks

import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.fx.Resizable;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.AbsoluteLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Test implements EntryPoint {

    public void onModuleLoad() {        
        
        LayoutContainer layoutContainer = new LayoutContainer();        
        layoutContainer.setSize(500, 500);
        layoutContainer.setLayout(new AbsoluteLayout());
        
        Label outerLabel = new Label("Label outside FieldSet");
        TextField<String> outerTextField = new TextField<String>();
        outerTextField.setEmptyText("TextField outside FieldSet");
        
        FieldSet fieldSet = new FieldSet();
        fieldSet.setHeading("Field Set");
        fieldSet.setSize(450, 300);
        Label innerLabel = new Label("Label inside FieldSet");        
        TextField<String> innerTextField = new TextField<String>();
        innerTextField.setEmptyText("TextField inside FieldSet");
        fieldSet.add(innerLabel);        
        fieldSet.add(innerTextField);
        
        Resizable resize = new Resizable(outerLabel);
        resize = new Resizable(outerTextField);
        resize = new Resizable(fieldSet);
        resize = new Resizable(innerLabel);
        resize = new Resizable(innerTextField);
        
        Draggable drag1 = new Draggable(outerLabel);
        drag1.setContainer(layoutContainer);
        drag1 = new Draggable(outerTextField);
        drag1 = new Draggable(fieldSet);
        
        Draggable drag2 = new Draggable(innerLabel);        
        drag2.setContainer(fieldSet);
        drag2 = new Draggable(innerTextField);
        
        layoutContainer.add(outerLabel);
        layoutContainer.add(outerTextField);
        layoutContainer.add(fieldSet);        
        
        RootPanel.get().add(layoutContainer);

    }

}

[sven]

1) and 3) You need to add a correct handle to start the drag. If the hole componenti s the handle than it will start dragging too. You can also listen to the dragstart event and cancel this, if the real target was the label and not the fieldset.

2) You will need to call preventDefault in a OnMouseDown event listener for this. This can also be found using the forum search.

[mmuneeb]

I have tried using preventDefault and stopPropagation but to no avail. I have a draggable container within a draggable container. Sometimes (randomly) it so happens that on trying to drag the child container the parent container gets dragged along. I have implemented drag behaviour through DragZone. I have tried all sorts of hacks but they don't seem to work.

Could someone please help me out with a solution for this?