Multiple draggable items without movement

[juldry 0 Likes (Newbie)]

Hello everyone,

First of all, my apologies for my English, because this is not my mother tongue. I’ll try to do my best :)

 

I'm a beginner with javascript.

I have multiple box on a page. Each box can be colored by « swiping » it (from the left to the right). The important things are that the box should not move when « swiping »and it shoult be togglable.
I successfully made an example with one box (you can see my pen). What i try to achieve is having multiple colored box instead of only one. Each box can be modified independently. But i can't figure out how to do this.
(P.S i try to use only vanilla javascript).

Do you have an idea to solve this problem?

Thank you ?

See the Pen YzzdbrW by Velkaedaar (@Velkaedaar) on CodePen

[ZachSaucier 7,119 Likes (Superhero)]

Hey juldry, welcome to the forums and thanks for being a Shockingly Green member!

 

You can do this by looping through each of your boxes and applying the same effect to each box, making sure to scope your variables correctly. Here's a modified version of your demo that does that:

 

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

 

Let me know if you have any questions about the approach! Thanks for the minimal demo.

[juldry 0 Likes (Newbie)]

Oh that's perfect! Thank you very much ?