Drag and Drop with state changes

I'm making an freeform drag and drop interaction where learners drag items into a backpack to build an emergency kit. At the start, the items are all different sizes, but I am using drop-correct and drop-incorrect states so that when they get dragged onto a target, they change to a small square. This is so they can be displayed in a grid.

I'm having trouble getting the dropped items to snap to the grid properly even though the interaction is set to "snap to center." I suspect it has something to do with the size and shape change, but I can't figure out how to fix it. 

I attached the interaction here. Any ideas of what I can do? 

Thanks for your help!

1 Reply