Jump to content
GreenSock

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

Possible to combine Draggable and Flip plugins for sorting?

Recommended Posts

Hi, as the Flip plugin can move things around the DOM, could it be used together with Draggable to make sorting items with variable heights easier? For example in the provided Codepen, I'd like to sort these two items with behaviour similar to: 

See the Pen mAyyQP by joelcoxokc (@joelcoxokc) on CodePen

 

Clearly it's not playing well together currently, but would it be possible? 

See the Pen zYZeOmJ by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

  • Like 1
Link to comment
Share on other sites

Oooh, this is a fun challenge.

I'm up against it a bit today but if no one grabs this I'll loop back round later and give it a whirl!

Link to comment
Share on other sites

My initial thought is that it might not work well with Flip because you are dragging an element you are trying to animate. Maybe if you use some sort of placeholder element the same size as the one you are dragging.

 

  • Like 2
Link to comment
Share on other sites

Thank you both, yes I'm thinking the same, in regards to using a placeholder element. 

Link to comment
Share on other sites

Yeah, a placeholder is probably your best bet. There were various logic issues in your pen and I tweaked a few things to come up with this: 

See the Pen yLMZxmO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • You were checking hitTest on the same element that you were dragging, causing false positives
  • You should suspend the logic while the flipping is happening, otherwise you'll get hitTests that fire while things are animating and overlapping
  • You were including the element that you were dragging in the flip animation itself, thus you'd create conflicts where an animation is trying to make the element go to one place while the drag is trying to pull it elsewhere. 

It isn't perfect and I don't have time to work out all the details for you right now, but hopefully that at least gives you something to go off of. 

 

Happy tweening! And thanks for being a Club GreenSock member! 🙌

  • Like 3
Link to comment
Share on other sites

Thanks for the feedback Jack, yes I threw that together pretty quick. I've worked a little more on it today, and will refine further soon and also look to integrate your approach. Note I think for now this demo requires a min width of 500px to work properly. 

See the Pen MWpLLeb by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Forgot to mention more recently, I've had success using Draggable and FLIP together for what I needed. Here's an example that includes a bit of my final solution: 

 

See the Pen yLXVxbx by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

 

The top left blue bars are the triggers. There's a few things missing in this example like how to handle empty parent containers etc but thought I would share. The FLIP plugin has certainly helped greatly in providing a solution to what this has replaced. So thanks GSAP as always!  

  • Like 5
Link to comment
Share on other sites

This is great! Thanks for sharing Donny.

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