JQuery UI - draggable() - Snap on rotated pictures

this is my first question on Stack Overflow but have already found numerous answers to my problems in the past. Thank you all for the great work, I hope I'll be able to help back eventually ;-)

I am developing a track builder where the track pieces can snap together (i.e. slot car races). The draggable method in JQuery ui is perfect for that. However, the track pieces are littl开发者_Python百科e images that can be rotated with 45 degrees angles. The snap option does not work once the pictures are rotated.

Can anyone explain to me briefly how the snapping option works? Please keep in mind that my challenge is to be able to snap images diagonally instead of in a regular grid.

I was hoping this would work with CSS transformations. I did a quick fiddle test you can give it a try here.