Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
imperialwebsolutions

Question about Draggable

Recommended Posts

Hello, 

 

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?

 

Thanks.

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

Link to comment
Share on other sites

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:

 :

$(".box").each(function(){ 
var overlapThreshold = "100%"; 
var draggables = Draggable.create(this,{ 
bounds: "#container",
throwProps:true,
edgeResistance: 0.1 ,
throwProps:true,
onDrag: function(e) {
	 if (this.hitTest("#block-container", overlapThreshold)) {
	 draggables[0].applyBounds("#block-container") 
	 } else if (this.hitTest("#container", overlapThreshold)) {
	 draggables[0].applyBounds("#container")  
	 }
 }
});
})

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