How do I get Animate CC to recognize drops in my drag and drop?

Question

I'm trying to build a drag and drop interaction in animate CC using a movie clip symbol. The goal is for it to animate when it's dropped in a drop area. I've seen, but haven't implemented a sprite sheet for that, but it seems like a good idea.

However, my question is more based on getting it to recognize a drop when it happens. I can't test the sprite sheet idea until I get this. I've been looking at a bunch of tutorials like this one, here, which is just editing this one to handle symbols in Animate CC or other objects. It got me a good bit of the way, but it's not working out too well on drops. I can pick up the draggable just fine, but I can't get it to get off the mouse even when I release the mouse.

dragger is the symbol in animate that I'm trying to drag (just in case that wasn't obvious).

dragger.on("pressmove", function(evt){
    evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
    stage.update(evt);
 });

This part is what's giving me trouble I think:

//refuses to release. doesn't recognize it.
dragger.on("pressup", function(evt){    
    //lock position of thermometer and play stabby animation
    dragger.x = dragger.x;
    dragger.y = dragger.y;

    if(intersect(evt.currentTarget, this.targetRight)){    //Intersection testing for good
        alert("YAY you're right AND it works!");

    }else if(intersect(evt.currentTarget, this.targetWrong)){   //intersection Testing for bad
        alert("BOO its wrong, but YAY it works");
    }
    stage.update(evt);
});

and then my code for intersect (for checking if it's over the drop area):

function intersect(obj1, obj2){ 
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.nominalBounds.clone(); // <-----Changed this line

  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);

  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.height / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;


  if(pt.x > w2 || pt.x < w1) return false;
  if(pt.y > h2 || pt.y < h1) return false;

  return true;
}

Answer 1

Checking out the demo included, and I get an immediate error when I start dragging (note I always have the "break on error" toggle set in Chrome when the inspector is open).

The issue is because the "pressup" handler is not scoped, so the obj2 is undefined. If you don't pass a scope, the method is called in the global scope.

var objBounds2 = obj2.getBounds().clone(); // Error! 

You can easily fix this by passing a scope to the on() method. This will ensure that this refers to the current scope.

dragger.on("pressup", function(evt){    //this function will be very custom, always
    //lock position of thermometer and play stabby animation
    dragger.x = dragger.x;
    dragger.y = dragger.y;

    if(intersect(evt.currentTarget, this.targetRight)){    //Intersection testing for good
        alert("YAY you're right AND it works!");

    }else if(intersect(evt.currentTarget, this.targetWrong)){   //intersection Testing for bad
        alert("BOO its wrong, but YAY it works");
    }
    stage.update(evt);

}, this); // <-------------------- Only thing I changed

I added a 3rd parameter to the on() method, to pass the scope. That should solve that error, and might even solve your problem.

Cheers,