Jump to content


Can GreenSock Draggable be dropped on a target symbol?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.



Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites



Have you looked at the first sample here:




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



Link to comment
Share on other sites

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});
Draggable.create(rect, {type:"x,y",
  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);
Link to comment
Share on other sites

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. 
  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.