Drag dropping markers fixed to the trace and getting data points on drop

I am new to PlotlyJS and have been working with it for the last 1 month. I have been able to make scatter plots with markers and lines. I have a few requirements which I have not been able to figure our from existing questions on this community and documentation.

  1. How can I find the data points on the trace when “dropping” a marker or shape or annotation at the end of drag event. So I am able to drag shapes and annotations using editable: true but how can I find the data points when the drag event ends?

  2. Is it possible to force the drag movement to stay “sticky” with the trace? I mean is it possible to force user to only move the shape or annotation on the trace so that user does not drop the shape or marker anywhere else?

  3. I see there are ax and ay axes for annotations to adjust their position in reference to the trace. Just like this, is it possible to adjust the position of a marker (like creating a marker on click event) to be slightly above or below the trace?

  4. Is it possible to use marker symbols like symbols for annotations and shapes?

I know these are a lot of questions, but they are mostly related to drag/drop and marker position and shapes. Any guidance would really help me with my project.

For these items, I have so far coded somethings based on following community questions: