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.

which versions of gwt, gwtquery and gwt-draggable are you using? — Manolo Carrasco Moñino, Jul 14 '13 at 10:32
I'm using 2.4 for GWT, gwt-query 1.1.0 and release 146 of gwt-query-ui. But I'm afraid changing versions would not be an option. I guess it could be something concerning to jquery use in IE8, but it's only a feeling. — , Jul 15 '13 at 17:16
Ah ok, I thought you were using gwtquery + gwtquery-dnd (both written in java and dont need external js). Your setup is pretty much complicated since Gwtquery-ui is a wrapper for the jquery-ui.js which as well needs jquery.js. Unfortunately I cannot help since I dont use this plugin. Maybe you could get some help from jsquery-ui lists. — Manolo Carrasco Moñino, Jul 15 '13 at 18:05

score 0 · Accepted Answer · answered Sep 25 '13 at 19:09

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;
    }
}

gwt-query - nested draggable propagation

1 Answers1