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;
}
答案 0 :(得分: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个参数,以传递范围。这应该可以解决这个错误,甚至可以解决你的问题。
干杯,