Transform an element by dragging it

Hello, I would like to create something interactive on my site but I don’t know how to do it. (See pictures below) When the user moves one of the black square in the logo in the center, it makes a yellow square appear instead. The idea is to show problems, and by passing them in the central logo, it turns into a solution. I found the function so that the user can drag the squares, but I don’t know how to make it so that by moving it to a fixed place (the logo), it makes a new square appear in another fixed place.
I don’t think it’s an interaction, I think it’s a function to insert in the code but I can’t find it.
I hope someone can help me!
Thanks in advance