(Canvas) Call one function from many eventListeners and include argument?

Question

I cannot figure out how to pass an argument from addEventListener to a function. The code below works fine for dragging a single object and dropping on a target. But I have 3 objects that I would like to drag and drop, How can I alter the code below so that parameters for the dragged element and the target can be passed to the three functions (handleClick, handleMove, checkIt).

stage = this;

this.star.addEventListener("mousedown", handleClick.bind(this));

function handleClick(e) {

var global = stage.localToGlobal(stage.star.x, stage.star.y);

stage.star.offset = {

'x': global.x - e.stageX,

'y': global.y - e.stageY

};

console.log(global);

}

this.star.addEventListener("pressmove", handleMove.bind(this));

function handleMove(e) {

var local = stage.globalToLocal(e.stageX + stage.star.offset.x, e.stageY + stage.star.offset.y);

stage.star.x = local.x;

stage.star.y = local.y;

console.log(local);

}

this.star.addEventListener("pressup", checkIt.bind(this));

function checkIt() {

if(this.star.hitTest(this.star2.x - this.star.x,this.star2.y - this.star.y)){

this.field.text = "Yes";

stage.star.x = stage.star2.x;

stage.star.y = stage.star2.y;

} else {

this.field.text = "no";

stage.star.x = 100;

stage.star.y = 100;

}

UDESCO · Accepted Answer

Still no answer. Anyone? Adobe staff?

Your question is not very clear but based on what I understand here's what you can do -

1. The object being dragged is accessible as- e.currentTarget

2. Any additional parameter (star1Target as you mention) can be initialized to all the draggable objects beforehand itself.

eg: initialize as:

this.star1.dropTarget = this.star1target;

this.star2.dropTarget = this.star2target;

//inside the eventhandler

check hittest for e.currentTarget and e.currentTarget.dropTarget

ClayUUID · Answer

The answer is right there in your event handler-- the e event object.

EaselJS v0.8.2 API Documentation : MouseEvent

Alternatively, in the drag start handler you can use the value of this to store a global pointer to the clicked object (assuming you used on or bind to assign the event handler).

Also you don't put property names in object literals in quotes. I'm surprised that even works.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.