Skip to main content
Participating Frequently
October 13, 2020
解決済み

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

  • October 13, 2020
  • 返信数 2.
  • 521 ビュー

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!

このトピックへの返信は締め切られました。
解決に役立った回答 JoãoCésar17023019

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

返信数 2

JoãoCésar17023019
Community Expert
Community Expert
October 13, 2020

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

andrea.grell作成者
Participating Frequently
October 13, 2020

That worls perfectly! Thanks a lot 🙂

JoãoCésar17023019
Community Expert
Community Expert
October 13, 2020

That's great! You're welcome!

Legend
October 13, 2020

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