Jump to content


Draggable gsap disble row

Recommended Posts



Hello !
I am using Draggable plugin for drag component with cloneing element. cloneing are working on my version.
But is there any way to drag elelemnt to specific box/class(multiple class)/custome box. 
Like screensort red drag box only drag on bottom row (marked red border). and green will drag in green border full wrapper(with red area too).

If in the box already have exits element that will not aapend inside that.

See the Pen ALgdjV?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi there!


Are you asking about bounds?

bounds [Element | String | Object] - To cause the draggable element to stay within the bounds of another DOM element (like a container), you can pass the element like bounds: document.getElementById("container") or a jQuery object is fine too, or even selector text like "#container". If you prefer, you can define bounds as a rectangle instead, like bounds: {top: 100, left: 0, width: 1000, height: 800} which is based on the parent’s coordinate system (top and left would be from the upper left corner of the parent). Or you can define specific maximum and minimum values like bounds: {minX: 10, maxX: 300, minY: 50, maxY: 500} or bounds: {minRotation: 0, maxRotation: 270}.

Or lockAxis?

  • Lock movement along a certain axis - Set lockAxis: true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that’s easy using the type ("top" or "y" to only allow vertical movement; "x", or "left" to only allow horizontal movement).


Lots of info in the docs - Maybe there's a demo in this collection that'll help you?


Link to comment
Share on other sites

Hello Cassie !  
Thankyou for quick replay.




 No i am lokking for draggble validation. Something like user can srop only specific are as per color box on upper screensort.
Some of element user can srop enywhere in the box but red product only drop on specific area on grid.

How we can manage multiple drop div using gsap draggble ??
I can't find in doc or codepen demo something like this.
Thank you :)

Link to comment
Share on other sites

There's a demo in the collection I shared that does something like this? Does this help?

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

  • Like 1
Link to comment
Share on other sites

@krunal the example @Cassie gave is exactly what you are looking for, you just have to tweak it to your liking.


Here is the same demo with an extra box that turns green when the correct box is picked up. 


See the Pen abYwBjZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

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