Drag Reorder Div Elements

[jermbo]

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.

[OSUblake]

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.

[hipe]

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!

[OSUblake]

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.

[hipe]

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)