Best way to create a jigsaw puzzle?

Best way to create a jigsaw puzzle?


I'm trying to create a jigsaw puzzle with jQuery UI. I've looked at
the various functionality and I think I need some kind of cross
between draggables (with snapping), doppables and sortables.
Here's my "specification":
- Assume for example a fixed size, eg 400x400 with 16 100x100 pieces.
- Drag pieces onto a 'canvas' which would be 400x400.
- Each piece must snap to 100x100 within the canvas (but not
necessarily outside it).
Extras:
- One alternative to the canvas would be to just have a blank area. In
this case it would be nice to 'lock' elements together after being
snapped, i.e. you would end up dragging 2 or 3 pieces at once. Is this
possible?
- Currently the pieces are just square but it would be nice to have
classic jigsaw pieces with indents and outdents. If the indents were
say 20 pixels wide, then the pieces would need to snap not to the
element boundary but to 20px inside the boundary. Is this possible?
So far, I've tried a basic draggable with outer snapping. It worked
okay but the pieces only snapped in one direction. For example, if a
piece is to the right of another they stick together and I can move
the right one up and down, but it does not snap to the top and bottom
of the left piece.
I also tried snapping to a grid. This works well since its easier to
line up pieces. The canvas idea doesn't work too well with this though
because its offset by and odd number of pixels.
I can't find a way to add 'snapping' to droppables, ie when you drop
an element onto another, it just stays half-in-half-out rather than
filling all the space.
Any ideas are welcome!!