How to Drag & Toss Elements Between Two Rotating Containers?

[Eunomiac]

I have a variable number of rotating circles (though the demo only includes two), each of which contain several Draggable dice in "orbit" around the circles' centers.

 

I want to be able to drag and toss (with inertia) the dice from one circle to another, and have them snap into orbit when they arrive.

 

But, try as I might, I can't figure out how to get the snapping to work accurately!

 

I've commented up (hopefully without too much rambling; I have been known to go on... kind of like I'm doing here...) a mini demo per the forum instructions that should clearly illustrate my problem.  The first fifty lines or so are setup and initialization, which I've done my best to collect into a closure (so you can "Fold All" everything to jump to the Draggable code, where I'm pretty sure I've made my mistakes).

 

Any help is, once again, very much appreciated!

 

(PS: I've also noticed that my dice are ever-so-slightly offset from the dashed rings they should be orbiting on.  I'm not sure if this is a GSAP issue or something unrelated, but if it's the former, I'd really appreciate some insight into that minor issue, too!)

See the Pen powBpLa by eunomiac (@eunomiac) on CodePen

[GreenSock]

Looks like a fun challenge, @Eunomiac. And thanks for creating a minimal demo. It's way beyond the scope of the help we offer for free in these forums (please see the forum guidelines) because this is all about complex logic issues rather than a GSAP-specific question. If you've got any of those, though, we'd be happy to help. If you'd like to explore paid consulting options, we can certainly connect privately about that because we always try to make sure our users get the help they need.

[GreenSock]

By the way, the reason your squares were about 4px off is because your code assumes that the "die" <div> elements are butted up exactly to the bottom of the <svg> but they're not. You probably need to set line-height: 0 to get rid of that space under the <svg>.