Skip to main content
Trial10
Trial10
Inspiring
March 15, 2022
Answered

How to make object jump to cursor/touch position on mousedown?

  • March 15, 2022
  • 1 reply
  • 385 views

Hello, based on the createjs drag and drop demo, I'm trying to make it so that the circle jumps to the position of the cursor/touch on mousedown.

I managed to make the dragging work, but no idea how to make the circle jump to position.

 

createjs.Touch.enable(stage);

this.circle_mc.on("pressmove", function (evt) {
	var point = stage.globalToLocal(evt.stageX, evt.stageY)
	evt.currentTarget.x = point.x;
	evt.currentTarget.y = point.y;
	stage.update();
});

 

Can anyone help it do something like this?

This topic has been closed for replies.
Correct answer JoãoCésar17023019

Hi.

 

Try this:

createjs.Touch.enable(stage);

this.circle_mc.parent.on("mousedown", function(evt)
{
	var point = evt.currentTarget.globalToLocal(this.circle_mc.stage.mouseX, this.circle_mc.stage.mouseY);
	
	this.circle_mc.x = point.x;
	this.circle_mc.y = point.y;
}, this);

 

Just please notice that you need a display object that covers the whole container area (e.g.: a rectangle in the background) so that the mouse event will be fired.

 

Regards,

JC

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
March 16, 2022

Hi.

 

Try this:

createjs.Touch.enable(stage);

this.circle_mc.parent.on("mousedown", function(evt)
{
	var point = evt.currentTarget.globalToLocal(this.circle_mc.stage.mouseX, this.circle_mc.stage.mouseY);
	
	this.circle_mc.x = point.x;
	this.circle_mc.y = point.y;
}, this);

 

Just please notice that you need a display object that covers the whole container area (e.g.: a rectangle in the background) so that the mouse event will be fired.

 

Regards,

JC

Trial10
Trial10Author
Inspiring
March 16, 2022

Thanks! That's interesting, I covered half the stage with a rectangle, and it only works when I click the mouse down on the rectangle area. I changed "mousedown" to "pressmove" in your code, and I'm still able to drag the circle around too.

 

 

 

I'm curious about one thing though: that "this" at the end of your code, does it work like .bind(this); so you don't have to do var root = this;?

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
March 16, 2022

You're welcome!

 

That's how the on method is implemented:

on ( type listener [scope] [once=false] [data] [useCapture=false] )

 

So the third parameter is the scope.

 

Regards,

JC

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