Good morning I am trying to store/retrieve a draggable ellipse over an image. Here is the code snippet: https://codepen.io/lbrettsinclair/pen/RwMPwVO

Let's say I retrieve from the db the 2 values for top and left for 106 and 202, the ellipse is not set at the proper location. Whenever I drag the ellipse and move it , my 2 input are updated with what I think are the proper values.

<div>
<input type="text" asp-for="@Model.Player_Injury.Injury_PosX" id="postop" class="form-control" value=106>
<input type="text" asp-for="@Model.Player_Injury.Injury_PosY" id="posleft" class="form-control" value=202>
</div>

could you please help me find what's wrong with either the sets of the top/left or the storing or the javascript provided.

Thank you