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!! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
