Jump to content


Question about Draggable

Go to solution Solved by Diaco,

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



I'm a Draggable/GSAP newb... I've been playing around with it to see if it meets a requirement that I have for a project i'm working on.


And basically what I'm trying to do is to start off with the draggable instances on the white div, but make the orange div the container, so that when a user drags the green or red squares they drag them from the white div to the orange div.


Right now, if I set the draggables bounds to the orange div they start off on the orange div.


Can anyone help me?



See the Pen Igrde by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi imperialwebsolutions  :)


why i`m not surprised , there's hitTest() logic inside GSAP Draggable that help you to easily apply new Bounds with .applyBounds()


GSAP have a freaking powerful monster ,you can call that ; Draggable  :mrgreen:


var overlapThreshold = "100%"; 
var draggables = Draggable.create(this,{ 
bounds: "#container",
edgeResistance: 0.1 ,
onDrag: function(e) {
	 if (this.hitTest("#block-container", overlapThreshold)) {
	 } else if (this.hitTest("#container", overlapThreshold)) {

Codepen :

See the Pen mAjvB by anon (@anon) on CodePen

Link to comment
Share on other sites

Thank you Diaco.AW,


This helps a lot. You are right about Draggable being a freaking powerful monster. LOL 

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.