Hide shape when I drag and release it to a position

[MarkSmit]

Hi everyone,

My goal is to make the button symbol dissapear when I drag and release it over a certain Y value.

It kinda works but when I drag the button symbol over the Y value (shown with the red line) I first have to click the shape for it to dissapear.

Is there a way for it to dissapear when I drag and release the button symbol over the red line?

Video example:

https://www.dropbox.com/s/gn4efqrlzkq1vf7/example.mp4?dl=0

Project files: https://www.dropbox.com/scl/fo/mpy2bsyjtcidizx5afuf8/hdl=0&rlkey=n51y70ro754ekzk135lm6yfsd

this.button.addEventListener("mousedown", onMouseDown.bind(this));
this.button.addEventListener("pressmove", onPressMove.bind(this));

function onPressMove(e){
	e.currentTarget.y = e.stageY / stage.scaleY - e.currentTarget.offset.y;
}

function onMouseDown(e) 
{
   e.currentTarget.offset = { x: e.stageX / stage.scaleX - e.currentTarget.x, y: e.stageY / stage.scaleY - e.currentTarget.y };	

	if (e.currentTarget.y > 650) {
		this.button.visible=false;		
		}
}

[JoãoCésar · Accepted solution]

Hi.

Here is a suggestion:

var root = this;
var targetPos = { y: this.line.y };

function main()
{
	createjs.Touch.enable(stage);
	stage.mouseMoveOutside = true;
	root.mouseDownListener = root.button.on("mousedown", onMouseDown);
	root.pressMoveListener = root.button.on("pressmove", onPressMove);
	root.pressUpListener = root.button.on("pressup", onPressUp);
}

function onMouseDown(e)
{
	e.currentTarget.offset = { y: (e.stageY / stage.scaleY) - e.currentTarget.y };
}

function onPressMove(e)
{
	e.currentTarget.y = (e.stageY / stage.scaleY) - e.currentTarget.offset.y;
}

function onPressUp(e)
{
	if (e.currentTarget.y - e.currentTarget.nominalBounds.height * 0.5 >= targetPos.y)
		remove(e.currentTarget); // or the visible property can just be set to false here
}

function remove(target)
{
	target.parent.removeChild(target);
	target._off = true; // needed in some versions of Animate
	target.off("mousedown", root.mouseDownListener);
	target.off("pressmove", root.pressMoveListener);
	target.off("pressup", root.pressUpListener);
}

main();

I hope it helps.

Regards,

JC

[MarkSmit]

Thanks for your reply! It seems I get an error "Uncaught TypeError: Cannot read properties of undefined (reading 'y')".

There is probably a mistake in this line: var targetPos = { y: this.line.y };

I removed .y but then the shape won't disappear when I release the mouse.

[JoãoCésar]

Hi.

Do you have an instance on stage called line?

If you prefer, you can assign a hard-coded value. Like this:

var targetPos = { y: 300 };

[MarkSmit]

That did the trick, thanks!

[JoãoCésar]

You're welcome!

[kglad]

1.  this.line is undefined.

2. hittest is a movieclip/displayobject method:

hitTest(x , y ) 

Boolean

Inherited from DisplayObject but overwritten in hitTest:450

Tests whether the display object intersects the specified local point (ie. draws a pixel with alpha > 0 at the specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all transform properties including regX/Y.

Parameters:

• x Number

  The x position to check in the display object's local coordinates.

• y Number

  The y position to check in the display object's local coordinates.

Returns:

Boolean: 

A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified coordinates.

[MarkSmit]

Thanks kglad! I'm still learning, i'm not a developer by nature but have grown an interest for it. Every bit of knowledge helps, thanks!

[kglad]

i just reread your message.

"There is probably a mistake in this line: var targetPos = { y: this.line.y };"

there shouldn't be any doubt about which line is causing the error.  open your browser's developer console and it will tell you exactly which line, in which frame on which timeline that error occurs.

if you don't know how to use the developer console,

 lesson 1 - https://youtu.be/PBDQN9CQSeI lesson 2 - https://youtu.be/KJEl0OenGUY

[MarkSmit]

Nice, I will use this the next time I have a bug. Thanks!

[kglad]

use the hitTest

[MarkSmit]

Hi kglad, I'm kind of a noob. What is a hitTest?