For anyone reading this with a similar problem, the solution ended up being manually attaching mouse/touch handling events to the element you create the draggable on, and enabling/disabling any parent draggables from there.
Using event.stopPropagation on mousemove (native browser) or onDrag (GSAP) won't work for desktop. Enabling/disabling parent draggables in the onDrag event (GSAP) will work but seems to lag by a few milliseconds (potentially due to the GSAP internal event delegation system, not sure how it works), meaning you'll still see some movement on the parent draggable and it looks pretty bad. The only solution for desktop/mobile is to enable/disable parent draggables in the mousemove event (native browser), eg:
var element = document.getElementById('my-child-draggable');
Draggable.create(element, {});
element.addEventListener('mousemove', function() {
if (conditionForStoppingPropagation) {
parentDraggable.disable();
}
});
element.addEventListener('mouseup', function() {
parentDraggable.enable();
});
