Jump to content
Search Community

Can GreenSock Draggable be dropped on a target symbol?

rfranks test
Moderator Tag

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

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



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

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.
  • Create New...