**Find out where to move the circle**

1. For a circle, compute the unit vectors along the red edges towards all its neighbor circles: **u**_{1}, **u**_{2}, ...

2. When the user drags the circle, compute the direction vector **d** from the point where the mouse has been first clicked, preferably over multiple frames to weaken errors of small mouse movements.

3. Compute the dot products of **d** with all vectors **u**_{i}. These represent the projection of **d** onto the red edges.

4. Choose the edge with the largest dot product. This is the one that has the most similar direction to the user's mouse vector **d**.

**Keep circle on edge**

You have already computed the edge unit vectors **u**_{i}. You can now simply move the balls along those vectors until they reach a neighbor position.

One issue to take into account is floating point precision; don't compare for position equality and don't move the ball by adding to its last position. You should rather divide the edge into a set of small intervals, and move the ball relatively to its original position.

When **p** is the original position and **u** the chosen edge vector, the positions of the ball will be **p + t*u**, where t is scaled according to the intervals. Depending on how you handle frame rates, you might also want to incorporate the delta time (but I would keep it constant for simplicity).