Jump to content
Search Community

Possible to combine Draggable and Flip plugins for sorting?

donny test
Moderator Tag

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

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

  • 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

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