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

[ChicoTom24]

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;

  }

}

[ClayUUID]

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.

[ChicoTom24]

Sorry, I'm not following. Could you help by showing me how the code block below would be modified so that both "star1" and "star2" eventlisteners would call the function checkIt AND pass the element clicked to the function?  I want to be able to check in the same function if either of them is on "starTarget" and then snap them to 100 if not.  Thanks for any help...

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

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

function checkIt() {

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

     stage.star.x = stage.starTarget.x;

     stage.star.y = stage.starTarget.y;

  } else {

     stage.star.x = 100;

     stage.star.y = 100;

  }

}

[ClayUUID]

Did you click the link I provided? The mouse event object provides a wealth of information about the object that fired the event. e.currentTarget should point to the object that was dragged.

For reasons I will not attempt to understand, you've properly included the (e) event parameter in every event handler except checkIt().

[ChicoTom24]

I did check the link at EaselJS v0.8.2 API Documentation : MouseEvent .  e.currentTarget helped.  But I have an issue with the drop.  I'll ask again with a different question:

Can anyone show how the code block below would be modified so that both "star1" and "star2" eventlisteners would call the function checkIt AND pass 1) the element clicked and 2) the target to the function?  I want to be able to check in the SAME FUNCTION if "star1" is released on "star1Target" and  if "star2" is released on "star2Target".  So I need to pass  the element being dragged and the target to to the function.  I actually need to do this for 10 objects.  But I figure making it work for 2 is all I need to know.

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

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

function checkIt(e) {

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

    stage.star.x = stage.starTarget.x;

    stage.star.y = stage.starTarget.y;

  } else {

    stage.star.x = 100;

    stage.star.y = 100;

  }

}

[ChicoTom24]

Still no answer.  Anyone? Adobe staff?

[UDESCO · Accepted solution]

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

[ChicoTom24]

Thanks for the help.