Skip to main content
MarkSmit
MarkSmit
Inspiring
October 14, 2022
Answered

Hide shape when I drag and release it to a position

  • October 14, 2022
  • 2 replies
  • 760 views

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;		
		}
}
This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

2 replies

kglad
Community Expert
kgladCommunity Expert
Community Expert
October 14, 2022

use the hitTest

MarkSmit
MarkSmitAuthor
Inspiring
October 25, 2022

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

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
October 14, 2022

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
MarkSmitAuthor
Inspiring
October 25, 2022

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ésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
October 25, 2022

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 };

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices