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

检查包含的演示，当我开始拖动时，我立即收到错误（请注意，当检查器打开时，我总是在Chrome中设置“错误中断”切换设置。）

问题是因为“pressup”处理程序没有作用域，所以obj2未定义。如果未传递范围，则在全局范围内调用该方法。

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

您可以通过将范围传递给on()方法来轻松解决此问题。这将确保this引用当前范围。

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

我在on()方法中添加了第3个参数，以传递范围。这应该可以解决这个错误，甚至可以解决你的问题。

干杯，

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

1 个答案: