how to create a simple Collision/Catch game in Google web designer?

Question

So i have been trying to create a simple catch game where a ball falls into a basket(moved by the user). Once the ball reaches the same coordinates of the basket, the animation moves ahead using an eventif code that i found online but does not seem to work for GWD. Below are the codes i have used

To move drag/drop the basket:

page1>mousemove>Custom code:

gwd.dragMove=function(event){
gwd.actions.events.setInlineStyle(gwd.dragger.id, "left:" + (event.pageX - gwd.dX) + "px; top:" + (event.pageY - gwd.dY) + "px");
}

page1>mouseup>Custom code:

gwd.dragStop=function(event){
gwd.dragger = null;

"Basketobject">mousedown>Custom code:

gwd.dragStart=function(event){
gwd.dragger = this;
gwd.s = window.getComputedStyle ? getComputedStyle(this, null) : this.currentStyle;
gwd.dX = event.pageX - parseInt(gwd.s["left"]);
gwd.dY = event.pageY - parseInt(gwd.s["top"]);

Till here the code works fine. I can move my object easily.

Below is the collision code. Not too sure where to add it: Fruit and player are the id for ball and the basket respectively.

gwd.collision=function(event){
var playerY = getYPosition("player");
var fruitX = getXPosition("fruit");
var fruitY = getYPosition("fruit");
var playerWidth = getProperty("player", "width");
var playerHeight = getProperty("player", "height");
var fruitWidth = getProperty("fruit", "width");
var fruitHeight = getProperty("fruit", "height");
if (playerY + playerHeight >= fruitY && playerY <= fruitY + fruitHeight) {
  gwd.actions.timeline.gotoAndPlay("page1", "label-1");
}

Hope someone can help with this!