Jump to content
GreenSock

Afrowave

Compare Draggables in different divs

Recommended Posts

Hi GreenSocksers,

I have a very interesting project as you have noticed by now. 😁

 

In this case, I need to compare an element in one cell with another.  I have a game-name draggable on the left side of the table and the game-tool draggable used to play the game specified by the left-side game-name on the right side of the table.

I have an object with the contents of the matched IDs of the draggable buttons, consisting of the game names and the game tools. As it is now, a game-name settles on the left side of the table and a game-tool settles on the right side of the table.

I have the first line with Racing  and Hurdles already done manually to give a visual of what is intended. Basically, once a game-name draggable settles, it should check for whether the game-tool draggable in the next div node corresponds to tool used in the game and vice versa for a game-tool settling first.

I was thinking that if I can find a way to make the draggable have a relationship with the div it settles in, I can then compare the IDs of the draggables with an object that has all the relationships.

I went through the GSAP Docs, and I was whether Snapping can be used for something like this.

See the Pen YzXpOQE by Afrowave (@Afrowave) on CodePen

Link to comment
Share on other sites

Hey Afrowave.

 

I'm very curious why you aren't using a <table> for tabular data like this... It might make the logic slightly more simple. But that's besides the point :) 

 

3 hours ago, Afrowave said:

I went through the GSAP Docs, and I was whether Snapping can be used for something like this.

What's your question related to snapping?

 

3 hours ago, Afrowave said:

I was thinking that if I can find a way to make the draggable have a relationship with the div it settles in, I can then compare the IDs of the draggables with an object that has all the relationships.

That seems fine to me.

 

If you were using <tr>s then I would suggest that onDragEnd you select the tr and compare the value of the relevant children. As it is, you could do the same thing but you'd have to compare siblings directly. 

 

Also in childrenGames shouldn't "Hula hoop" match with a value of "Hoop"?

Link to comment
Share on other sites

You have a point @ZachSaucier.

Let me try it out with a table. Sometimes it is the easier things that escape our attention.

 

2 hours ago, ZachSaucier said:

What's your question related to snapping?

I was wondering if I could use snapping to associate a draggable with the div it is "in".

 

2 hours ago, ZachSaucier said:

Also in childrenGames shouldn't "Hula hoop" match with a value of "Hoop"?

It does now. 😅

Link to comment
Share on other sites

1 hour ago, Afrowave said:

I was wondering if I could use snapping to associate a draggable with the div it is "in".

It's not really built for that as far as I know. Custom logic like what you need would likely add a significant amount of file size and most people wouldn't use it. So I think it's up to you to implement it :) 

  • Haha 1
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.
×