Jump to content
GreenSock

jermbo

Drag Reorder Div Elements

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

Here is a solution to dragging and reordering divs, vertically. 

I was wondering if someone could check my code and see if there is anything I can optimize?

( Original idea was from Blake 

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

)

See the Pen ZGroPE by jermbo (@jermbo) on CodePen

Link to comment
Share on other sites

That's actually from

See the Pen iFDow?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

.

 

You could probably simplify a lot of it by using hitTest and getDirection, which is pretty much how this

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

works. It might also help to store information about your Draggables in some sort of data structure like an array or object so you can quickly access information about them.

  • Like 4
Link to comment
Share on other sites

  • 2 months later...

yay - my first codpen. i got excited about OSUblake's demo, and ended up making a version tailor-made to my requirements, that's vertical-only:

 

See the Pen jbWNVR by h1p3 (@h1p3) on CodePen

 

synopsis: The height of the tiles is determined solely by content (and CSS). it never rewrites to the DOM, only alters the CSS transform matrix of the tiles. GSAP timelines are used. I implemented my own equivalent of hitTest and getDirection, for reasons.

  • there is an obnoxious amount of documentation in the 1K lines of code
  • this is only a draft - this thing doesn't yet "emit" the new order to anywhere
  • note that I "hand parse" the CSS "transform" property in one place - this isn't pretty 
  • i'm working on making this an angular directive .. maybe

all suggestions welcome!

Link to comment
Share on other sites

Very nice!!!

 

Looks like you changed a lot because I don't think I see any code from the original. Mine was originally an Angular directive, so you can kind of see remnants of the scope object in a lot of the functions.

Link to comment
Share on other sites

  • 3 weeks later...

Thanks! I have since discovered several ways I could have better utilized Draggable, ways that will reduce the code bloat here.

 

Ya, i intend for this to be the "backend" for an angular directive, once I get around to getting my head around angular ;)  (and by then hopefully it will have its own dedicated github repository, etc)

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