Jump to content

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

Automatically arrange the elements on top of each other. Drag and Drop

Go to solution Solved by Cassie,

Recommended Posts

Please tell me how to make when you move an element in a block ("Drop area") elements become automatically on top of each other.
And to be able to sort them



an example of what I want to achieve

See the Pen waVYvz by osublake (@osublake) on CodePen

 as in the example above

See the Pen abyJdxJ by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

Link to comment
Share on other sites

Hi @GeS,


The above demos are working and should provide you with a lot of information about how to implement draggable.

If you're stuck - Could you maybe explain what are you trying to achieve that isn't explanatory from the above demos? What have you tried so far?

You say you want to 'sort' them, could you maybe explain how you are trying to sort them?



Link to comment
Share on other sites


Hello, Cassie)
My studio where I work has a purchased membership and I can use all the plugins.
I'm just experimenting from my personal account.

I can't quite figure out how to get my items to be dragged and dropped into completely different locations
Here's an example of their location

By sorting I mean the functionality when they can be shuffled (the 1st item can become the 4th item. The 3rd can take the place of the 2nd item, and so on). But only when these elements are already inside the block where we move them

Frame 1171275152.jpg

Link to comment
Share on other sites

  • Solution

Hi again @GeS

It sounds like you're just trying to style the first demo differently? Correct?


You'll need to tweak the code a little bit so that it isn't trying to order the tiles on the left, then you can arrange them however you like.

Like this?

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

I'm not sure exactly how you want your logic to work but hopefully this is a start

  • Like 3
Link to comment
Share on other sites

Oh Cassie
Thanks! that's exactly what I'm trying to do ❤️

  • Like 1
Link to comment
Share on other sites

It's a little buggy so you'll need to comb through that pen - work out what logic you need vs what that pen is doing and then fill in the gaps.

We try to keep these forums to GSAP-specific questions so I'm afraid we can't help you iron out general logic issue with your JS, but if you get stuck on any draggable related things, pop back here and we'll happily give you a nudge in the right direction!

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