jermbo

Drag Reorder Div Elements

Recommended Posts

That's actually from Jamie Jefferson.

 

You could probably simplify a lot of it by using hitTest and getDirection, which is pretty much how this sortable demo 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

Share this post


Link to post
Share on other sites

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:

 

http://codepen.io/h1p3/pen/jbWNVR

 

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!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.