Can GreenSock Draggable be dropped on a target symbol?

[rfranks 0 Likes (Newbie)]

Hey there first time poster and potential user of the GreenSock Draggable JS in a Adobe Edge project I'm working on, which is converting an old Flash animation into HTML5.

 

My first question is: I was wondering if I can have a draggable circle and if dragged onto a target square the animation will go to another frame, otherwise it returns to it's original position?

 

I couldn't seem to see anything mentioned in the forums.

 

The reason I want to use Greensock is so the draggable item works correctly on a Responsive Scaling animation.

 

Thanks in advance.

 

Ross.

[Carl 11,099 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

I'm quite certain you would be able to make that work. However, Draggable currently does not contain any collision-detection functionality. You would have to find your own solution for that.

 

Here are some Draggable demos that you might find interesting: http://codepen.io/collection/AtuHb/

[rfranks 0 Likes (Newbie)]

Thanks for the speedy reply Carl.

 

Could the drag and drop instead be based off coordinates then? 

 

ie if dropped within a radius of a x and y coordinate that centres on the square?

 

or would that be a problem with Responsive Scaling?

[GreenSock 18,233 Likes (Superhero)]

How about something like this?:

http://codepen.io/GreenSock/pen/GFBvn

[rfranks 0 Likes (Newbie)]

Looks good to me, and this will work on a Responsive Scaling animation (sorry just leaving the office now)?

[GreenSock 18,233 Likes (Superhero)]

I don't see why not, but I haven't done extensive testing. Please let us know how it goes. 

[Rodrigo 5,044 Likes (Superhero)]

Hi,

 

Have you looked at the first sample here:

 

http://www.greensock.com/draggable/

 

If you check the "Live snap" box you can see how it goes straight to the end position. You could replace the grid values in the snap function with the dimensions and offset of the container you want the element to be dragged into.

 

You can see the complete code in this codepen from the Greensock collection:

 

See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

 

Rodrigo.

[rfranks 0 Likes (Newbie)]

Hmm I gave it a go and it's not working, anything I'm doing wrong?

 

Or see file here https://www.dropbox.com/s/v5ybrjszy33to1i/gs_dragend2.zip

 

var rect = sym.$("rect");

var droppables = sym.$("target");

 

function onDrop(dragged, dropped) {

  //TweenMax.fromTo(dropped, 0.1, {opacity:1}, {opacity:0, repeat:3, yoyo:true});

  alert("hello");

}

 

Draggable.create(rect, {type:"x,y",

  bounds:window,

  onDragEnd:function() {

var i = droppables.length,

       bounds = this.target.getBoundingClientRect();

while (--i > -1) {

if (this.target !== droppables && rectOverlap(droppables.getBoundingClientRect(), bounds)) {

onDrop(this.target, droppables);

}

}

}

});

[GreenSock 18,233 Likes (Superhero)]

It looks like you forgot to copy the rectOverlap() function. If you crack open Chrome Dev Tools, you'll see the error mentioning that it's undefined. So just add this to your code:

function rectOverlap(r1, r2) {
	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
}

Also note that the overlap algorithm is simply checking for the bounding rectangle but it looks like one of your shapes is a circle, so you may need to adjust the algorithm accordingly. Or maybe your functionality doesn't really require that. I just figured I'd mention it. 

[rfranks 0 Likes (Newbie)]

Sweet I think that's exactly it, thanks bigtime for that.