Compare Draggables in different divs

[Afrowave 18 Likes (Newbie)]

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

[ZachSaucier 7,162 Likes (Superhero)]

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"?

[Afrowave 18 Likes (Newbie)]

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

[ZachSaucier 7,162 Likes (Superhero)]

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