Draggable object not aligned with cursor

Hi everyone,

I'm making a test interactive animation. The goal of the interactive animation is that when you drag the blue ball over the red line an animation will play.

It works like a charm, the only problem I have is that the blue ball doesn't stay aligned with the cursor when I drag it. I guess it has to do something with getting the coordinates from the browser and not the stage? And this could be done with globalToLocal? But I don't know how to implement it to my code.

Example video: https://www.youtube.com/shorts/KCJ7yZphv5M

Project files: https://www.dropbox.com/scl/fo/h79cyghs9ebcab3qeaw7g/h?dl=0&rlkey=du4t4he9scsj7an45jl1cpgf6

this.stop();


let root = this;


this.pull_me.addEventListener("pressmove", dragCord)

function dragCord(e) {
	
	e.currentTarget.y= e.stageY;
}


this.pull_me.addEventListener("pressmove", activateSwitch)

function activateSwitch () {
	
	if (root.pull_me.y>852)
	root.gotoAndPlay(10);
}