Highlighted

How do you make a draggable object? (in html5 canvas)

Community Beginner ,
Jul 16, 2020

Copy link to clipboard

Copied

Nothing fancy. 

 

Can someone please help me make a rectangle that a user can click on and move it around.

And it stays where the user moved it after they stop moving it. 

 

That's it. 

 

Reading other tutorials, this appears to require either learning spanish, or getting a degree in computer science. 

I've just spent 4 hours trying to figure this out, and I am about to give up. 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

Supposing:

- It's HTML5 Canvas;

- The Transformation Point of the rec is at the center;

- The rec is in the main timeline...

 

... this code should do the job:

var root = this;
var rec = root.rec;

createjs.Touch.enable(stage);

rec.on("mousedown", function(e)
{
	e.currentTarget.offsetX = stage.mouseX / stage.scaleX - e.currentTarget.x;
	e.currentTarget.offsetY = stage.mouseY / stage.scaleY - e.currentTarget.y;
});

rec.on("pressmove", function(e)
{
	e.currentTarget.x = stage.mouseX / stage.scaleX - e.currentTarget.offsetX;
	e.currentTarget.y = stage.mouseY / stage.scaleY - e.currentTarget.offsetY;
});

 

Please let us know.

 

Regards,

JC

Views

85

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How do you make a draggable object? (in html5 canvas)

Community Beginner ,
Jul 16, 2020

Copy link to clipboard

Copied

Nothing fancy. 

 

Can someone please help me make a rectangle that a user can click on and move it around.

And it stays where the user moved it after they stop moving it. 

 

That's it. 

 

Reading other tutorials, this appears to require either learning spanish, or getting a degree in computer science. 

I've just spent 4 hours trying to figure this out, and I am about to give up. 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

Supposing:

- It's HTML5 Canvas;

- The Transformation Point of the rec is at the center;

- The rec is in the main timeline...

 

... this code should do the job:

var root = this;
var rec = root.rec;

createjs.Touch.enable(stage);

rec.on("mousedown", function(e)
{
	e.currentTarget.offsetX = stage.mouseX / stage.scaleX - e.currentTarget.x;
	e.currentTarget.offsetY = stage.mouseY / stage.scaleY - e.currentTarget.y;
});

rec.on("pressmove", function(e)
{
	e.currentTarget.x = stage.mouseX / stage.scaleX - e.currentTarget.offsetX;
	e.currentTarget.y = stage.mouseY / stage.scaleY - e.currentTarget.offsetY;
});

 

Please let us know.

 

Regards,

JC

Views

86

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 16, 2020 0
Adobe Community Professional ,
Jul 16, 2020

Copy link to clipboard

Copied

Hi.

 

Supposing:

- It's HTML5 Canvas;

- The Transformation Point of the rec is at the center;

- The rec is in the main timeline...

 

... this code should do the job:

var root = this;
var rec = root.rec;

createjs.Touch.enable(stage);

rec.on("mousedown", function(e)
{
	e.currentTarget.offsetX = stage.mouseX / stage.scaleX - e.currentTarget.x;
	e.currentTarget.offsetY = stage.mouseY / stage.scaleY - e.currentTarget.y;
});

rec.on("pressmove", function(e)
{
	e.currentTarget.x = stage.mouseX / stage.scaleX - e.currentTarget.offsetX;
	e.currentTarget.y = stage.mouseY / stage.scaleY - e.currentTarget.offsetY;
});

 

Please let us know.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2020 1
Community Beginner ,
Jul 16, 2020

Copy link to clipboard

Copied

It worked!

 

draggable rectangledraggable rectangle

 

This is perfect, so many ideas!

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2020 1
Adobe Community Professional ,
Jul 16, 2020

Copy link to clipboard

Copied

Amazing! You're welcome!

 

And thanks for the preview!

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2020 0
Explorer ,
Sep 05, 2020

Copy link to clipboard

Copied


Hello,
This code works very well but why doesn't the touch function work?
I made a copy and paste and it doesn't work on a tablet.
I'm a beginner and I don't understand how createjs.Touch.enable(stage) works;

Thank you for all your answers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 05, 2020 0