动画CC-Easeljs-多个拖动和多个目标下降

我是stackerflow、Javascript、Adobe Animate CC和EaselJS世界的新手。所有这些我都在学习如何使用。我正在尝试为html5画布构建一个拖放活动，其中包含5个可拖动对象和5个目标。我需要每个目标都能接受并迅速[就位]5个可拖动的目标中的任何一个。这个想法是让用户做出5个选择，然后在放置完所有5个可拖动项后检查答案。

有几个EaselJS拖放活动的例子，但我发现最适合我需要的是codepen。我注意到其他几个用户也使用了这个相同的例子作为起点。我在codepen上创建了一个分支，试图展示我的目标。

我相信有更好的方法来编码这个，但我觉得我还没有这样做的知识。特别是在codepen上的分支中，我只是复制和粘贴以创建更多的dragger和目标。我制作了多个"dragger"answers"destinations"，每个都有自己的.setBounds，然后将"destinates"推送到一个数组中。我的计划是围绕dragger.on（"pressup"，function（evt）部分设置一个for循环，并用包含推送内容的数组"destinations[i]"替换所有目的地，希望它能让我在任何目标上放置任何可拖动的内容。

这没用。通过谷歌chrome的开发者工具，我不断收到同样的错误，称无法读取未定义的属性"getBounds"。这里指的是这一节，var objBounds2=obj2.getBounds（）.clone（）。

如果你还在读这篇文章，并且能够跟随我的努力，那么谢谢你。我确信我会让事情变得比实际需要的更复杂。我需要所有我能得到的帮助。

这里是显示对象的创建位置[可拖动对象和目标。]

//VARIABLES
//Drag Object Size
dragRadius = 40;
//Destination Size
destHeight = 100;
destWidth = 100;
//Circle Creation
var label = new createjs.Text("RED", "14px Lato", "#fff");
label.textAlign="center";
label.y -= 7;
var circle = new createjs.Shape();
circle.graphics.setStrokeStyle(2).beginStroke("black")
.beginFill("red").drawCircle(0,0, dragRadius);

//Drag Object Creation
//Placed inside a container to hold both label and shape
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
dragger.setBounds(100, 100, dragRadius*2, dragRadius*2);
//DragRadius * 2 because 2*r = width of the bounding box
var label2 = new createjs.Text("RED", "bold 14px Lato", "#000");
label2.textAlign = "center";
label2.x += 50;
label2.y += 40;

var box = new createjs.Shape();
box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
var destination = new createjs.Container();
destination.x = 350;
destination.y = 50;
destination.setBounds(350, 50, destHeight, destWidth);
destination.addChild(label2, box);

这是拖放部分：

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
       box.graphics.clear();
       box.graphics.setStrokeStyle(3)
       .beginStroke("#0066A4")
       .rect(0, 0, destHeight, destWidth);
     }else{
       evt.currentTarget.alpha=1;
       box.graphics.clear();     box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
     }
});
//Mouse UP and SNAP====================
dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
    dragger.x = destination.x + destWidth/2;
    dragger.y = destination.y + destHeight/2;
    dragger.alpha = 1;
    box.graphics.clear();     
    box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
    stage.update(evt);
  }
});

以下是测试当前可拖动目标的功能：

//Tests if two objects are intersecting
//Sees if obj1 passes through the first and last line of its
//bounding box in the x and y sectors
//Utilizes globalToLocal to get the x and y of obj1 in relation
//to obj2
//PRE: Must have bounds set for each object
//Post: Returns true or false
  function intersect(obj1, obj2){
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.getBounds().clone();
  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);
  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.width / 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;
}

//Adds the object into stage
stage.addChild(destination, dragger, destination2, dragger2, destination3, dragger3);
stage.mouseMoveOutside = true;
stage.update();

*很抱歉，我没有代表点来发布更多显示其他用户帖子或任何图片的链接。