Draggable swap items

[Kerox]

Hi! I'm trying to adapt this codepen to my needs.   

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

I have only one row with 5 elements, so 5 columns. My items are 90px x 90px so I've changed rowSize to 90, colSize to 5 so it fits my container, totalRows to 1, and totalCols to 5, but it acts weird. If I hold click on an item and then I slightly move the cursor, it passes through all the items really fast.

Also If you can provide me another pen I'd be grateful!

See the Pen mdEbWEd by keroxen (@keroxen) on CodePen

Edited October 5, 2020 by Kerox
added my own codepen

[ZachSaucier]

Hey @Kerox and welcome to the GreenSock forums.

 

Please provide your CodePen so that we can see where you're going wrong, not the pen that you're basing things off of  That way we'll be able to help you with your actual issue.

[Kerox]

Just now, ZachSaucier said:

Hey @Kerox and welcome to the GreenSock forums.

 

Please provide your CodePen so that we can see where you're going wrong, not the pen that you're basing things off of  That way we'll be able to help you with your actual issue.

I've just edited the post and added my codepen.

[ZachSaucier]

The issue is that your elements that you're sorting are not positioned like the ones in Blake's demo. All of his have position: absolute, yours do not.

 

Furthermore, your variables declaring how big each item in are incorrect. They should match the values set in your CSS (you could get them from your CSS using GSAP's .getProperty() method if you'd like). 

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

 

Side note: We highly recommend upgrading to the GSAP 3 syntax. It's sleeker and allows you to use new features like defaults  

[Kerox]

Thanks a lot! ❤️

Now I understand where I was wrong..