Decided that I would try a go at nested draggables one more time... And it worked!
It's not so hacky this round.
Container div with draggable type: "x,y"and an inner div with draggable type: "y".
Then, on the container, include this:
onLockAxis: function (e) {
if (this.lockedAxis === "x") {
this.endDrag(e);
} else {
innerDraggable.disable();
}
},
onRelease: function () {
if (this.getDirection() === "right" || this.getDirection() === "left") {
innerDraggable.enable();
}
}
This allows me to figure out which way the user is dragging (via lockedAxis) and do with it whatever is needed.
If the container was just type: "x", then the two draggables together would act like a single type: "x,y". I want them to act like a single lockAxis draggable, but with extra-granular control over their motion.
Coincidentally, this arrangement doesn't require tweening the draggable like I needed to before. (Bonus)
Thanks, again, for the response Carl. Inspired me to give it another go from scratch!
