gwt-query - nested draggable propagation

Question

I've written the following code:

HorizontalPanel draggable = new HorizontalPanel();
Function startDragParent = new Function () {
    @Override
    public boolean f (Event e) {
    // some code here...
    return false;
}
};
Function dragParent = new Function () {
    @Override
    public boolean f (Event e) {
    // some code here...
    return false;
}
};
Function stopDragParent = new Function () {
    @Override
    public boolean f (Event e) {
    // some code here...
    return false;
}
};
$(draggable).as(Ui).draggable()
    .bind(Draggable.Event.start, startDragParent);
    .bind(Draggable.Event.drag, dragParent);
    .bind(Draggable.Event.stop, stopDragParent);

HorizontalPanel childDraggable = new HorizontalPanel();
Function dragChild = new Function () {
    @Override
    public boolean f (Event e) {
    // some code here...
    return false;
}
};
$(childDraggable).as(Ui).draggable().bind(Draggable.Event.drag, dragChild);

// finally I add one element inside another
draggable.add(childDraggable);

My problems start when I start dragging the inner element around, then draggable (parent of childDraggable) start dragging too (only in IE8 and, I guess, in previous versions). I would like preventing this kind of event propagation, i.e. I would like dragging the innerElement without dragging its parent.

I've tryied stopPropagation and preventDefault but it was no good. Help would be appreciated.

Thanks in advance.

Answer 1

stopPropagation doesn't work on IE, you should use something like cancelBubble in the following manner:

function stop(e) {
    // feature check (in IE this will be undefined) 
    if (e.stopPropagation) {
        // standards compliant browser
        e.stopPropagation();
    } else {
        // dreadful IE 
        e.cancelBubble = true;
    }
}