Highlighted

Animate 2020 HTML5 Canvas - Drag MC by clicking a smaller area inside of it

Community Beginner ,
Oct 13, 2020

Copy link to clipboard

Copied

Hey there, I am trying to make objects (shopping bags) on the main stage draggable and have actually managed to do that. But it would be really nice if the user could only drag the bags by "picking them up" at the handles.

For the bags itself I used the code shown below, it works well (with the draggable mc's being "bag1", "bag2", etc.). Inside the mcs of "bagx"is another movieclip with the handles called "bag_handle".

So, clicking and dragging "bag_handle" should move the whole "bag" MC where it's in.

Is that possible?

 

Here is the code I used for the regular dragging:

this.stop();
createjs.Touch.enable(stage);

var dragItems = [this.bag1, this.bag2];
for(var i = 0; i<dragItems.length; i++){	
	dragItems[i].on("mousedown", onMouseDown.bind(this));
	dragItems[i].on("pressmove", onMouseMove.bind(this));
};

function onMouseDown(evt) {
	var reg = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
	var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
	evt.currentTarget.regX = reg.x;
	evt.currentTarget.regY = reg.y;
	evt.currentTarget.x = p.x;
	evt.currentTarget.y = p.y;
};

function onMouseMove(evt) {
	var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
	evt.currentTarget.x = p.x;
	evt.currentTarget.y = p.y;
	var item = evt.currentTarget;

    var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);        
        item.x = pt.x - item.offset.x;
        item.y = pt.y - item.offset.y;
};

 Drag Bag Example Files (.fla, .html, .js)

 

Thank you!

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

Hi.

 

You can use the target property from the event object and check for the handles name.

 

Like this:

function onMouseDown(evt) {
	if (evt.target.parent.name === "bag_handle")
	{
		var reg = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
		var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		evt.currentTarget.regX = reg.x;
		evt.currentTarget.regY = reg.y;
		evt.currentTarget.x = p.x;
		evt.currentTarget.y = p.y;
	}	
};

function onMouseMove(evt) {
	if (evt.target.parent.name === "bag_handle")
	{
		var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		evt.currentTarget.x = p.x;
		evt.currentTarget.y = p.y;
		var item = evt.currentTarget;
	}
};

 

Regards,

JC

TOPICS
Code

Views

35

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

Animate 2020 HTML5 Canvas - Drag MC by clicking a smaller area inside of it

Community Beginner ,
Oct 13, 2020

Copy link to clipboard

Copied

Hey there, I am trying to make objects (shopping bags) on the main stage draggable and have actually managed to do that. But it would be really nice if the user could only drag the bags by "picking them up" at the handles.

For the bags itself I used the code shown below, it works well (with the draggable mc's being "bag1", "bag2", etc.). Inside the mcs of "bagx"is another movieclip with the handles called "bag_handle".

So, clicking and dragging "bag_handle" should move the whole "bag" MC where it's in.

Is that possible?

 

Here is the code I used for the regular dragging:

this.stop();
createjs.Touch.enable(stage);

var dragItems = [this.bag1, this.bag2];
for(var i = 0; i<dragItems.length; i++){	
	dragItems[i].on("mousedown", onMouseDown.bind(this));
	dragItems[i].on("pressmove", onMouseMove.bind(this));
};

function onMouseDown(evt) {
	var reg = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
	var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
	evt.currentTarget.regX = reg.x;
	evt.currentTarget.regY = reg.y;
	evt.currentTarget.x = p.x;
	evt.currentTarget.y = p.y;
};

function onMouseMove(evt) {
	var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
	evt.currentTarget.x = p.x;
	evt.currentTarget.y = p.y;
	var item = evt.currentTarget;

    var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);        
        item.x = pt.x - item.offset.x;
        item.y = pt.y - item.offset.y;
};

 Drag Bag Example Files (.fla, .html, .js)

 

Thank you!

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

Hi.

 

You can use the target property from the event object and check for the handles name.

 

Like this:

function onMouseDown(evt) {
	if (evt.target.parent.name === "bag_handle")
	{
		var reg = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
		var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		evt.currentTarget.regX = reg.x;
		evt.currentTarget.regY = reg.y;
		evt.currentTarget.x = p.x;
		evt.currentTarget.y = p.y;
	}	
};

function onMouseMove(evt) {
	if (evt.target.parent.name === "bag_handle")
	{
		var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		evt.currentTarget.x = p.x;
		evt.currentTarget.y = p.y;
		var item = evt.currentTarget;
	}
};

 

Regards,

JC

TOPICS
Code

Views

36

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
Oct 13, 2020 0
Adobe Community Professional ,
Oct 13, 2020

Copy link to clipboard

Copied

Intentionally limiting the drag target to just the handles sounds like a super annoying bad design. I know I'd hate it.

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...
Oct 13, 2020 0
Adobe Community Professional ,
Oct 13, 2020

Copy link to clipboard

Copied

Hi.

 

You can use the target property from the event object and check for the handles name.

 

Like this:

function onMouseDown(evt) {
	if (evt.target.parent.name === "bag_handle")
	{
		var reg = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
		var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		evt.currentTarget.regX = reg.x;
		evt.currentTarget.regY = reg.y;
		evt.currentTarget.x = p.x;
		evt.currentTarget.y = p.y;
	}	
};

function onMouseMove(evt) {
	if (evt.target.parent.name === "bag_handle")
	{
		var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		evt.currentTarget.x = p.x;
		evt.currentTarget.y = p.y;
		var item = evt.currentTarget;
	}
};

 

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...
Oct 13, 2020 1
Community Beginner ,
Oct 13, 2020

Copy link to clipboard

Copied

That worls perfectly! Thanks a lot 🙂

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...
Oct 13, 2020 1
Adobe Community Professional ,
Oct 13, 2020

Copy link to clipboard

Copied

That's great! You're welcome!

__________________________________________
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...
Oct 13, 2020 0