Hi there,
I'm developing an application that requires nested draggable objects (draggables within draggables), however I'm running into issues. As far as I can understand from the docs, the linked codepen should work, allowing the child draggable to be dragged independently of the parent. This appears not to work as a result of the draggable events (mousemove etc) being attached to the document rather than the actual draggable element, so stopPropagation has no effect. If I understand correctly though stopImmediatePropagation should still work though based on the event attachment order.
I understand one solution would be to enable/disable the parent draggable based on child dragStart/dragEnd, however this doesn't work for me as I need to have a vertical-only draggable grandchild within a vertical-only draggable child within a horizontal-only draggable parent (complicated I know!), and dragging the grandchild horizontally should still trigger the parent draggable, but dragging it vertically should NOT trigger the child draggable. My current solution involves enabling/disabling the parent draggable based on scroll direction, however this results in a small amount of movement in the parent direction before it can be disabled.
The reason I'm asking is that this is a responsive app, and mobile is currently working fine as the Draggable code attaches touch events directly to the element, rather than the document, and works perfectly (with no movement of the parent element whatsoever). Is there a way to replicate this on desktop without breaking everything, potentially using stopImmediatePropagation? (I note in the code you've put "//attach these to the document instead of the box itself so that if the user's mouse moves too quickly (and off of the box), things still work.")