Drag along the custom line (HTML5)

ZIM has industry-leading drag along path.  See https://zimjs.com/nio for more features.  This was in ZIM NIO (version 9) we have now passed that by six versions so there are more features since then.  The general format is:

new Circle().addTo().animate({
  props:{path:new Squiggle().center()},
  drag:true
}
Squiggle() can accept an SVG path or you can make one here https://zimjs.com/paths - note the docs on Squiggle https://zimjs.com/docs.html?item=Squiggle - for a closed loop you can use Blob.

Here is an app that uses the dragging on path https://zimjs.com/groovity 

there, at least, 3 ways i can think of to do that, but none of them are easy.

i think the easiest would be to create a movieclip with the disk animating across the timeline with its path restricted to that line.  there are several ways to do that, including one suggested by @Colin Holgate .

once that's done, you could encode drag and drop for the disk based on the mouse distance from the red disk and determine red disk frame based on that distance.