draggable within another draggable

[mukeshsoni]

I have a use case where one draggable can be within another draggable and so on. I have positioned the elements as 'absolute'. When i move a child draggable element, the parents left+top are also changed and it moves too. I have also tried attaching handles for each element (by class name), but to no affect. Is it possible to move the child element independently?

[mukeshsoni]

Ok, figured the problem. Since the handle class names are the same, whenever any handle with that class name is dragged, every draggable with handle set as that class name starts moving. I have made it work using an ugly hack - using unique classnames for each handle (autoincrement).

Is there a better way of handling this?

[mzabriskie]

@mukeshsoni can you share some code so that I can see your use case?

[mzabriskie]

Closing due to lack of response. Reopen if needed.

[brianfay]

For anbody reading this who is trying to drag one Draggable component inside another without moving both, you can implement handleStart like this:

handleStart(e, ui){
e.stopPropagation();
}

That will stop the drag event from bubbling up to the parent, so that the child can be moved independently from the parent.

[AlexChaseJones]

anyone endinging up here; the new method is called onStart