Decisions

There are now two versions of the jigsaw puzzle exercise: one on JQuery, and the
other on the Russian code (Javascript.info). Both are fast and allow for free drag;
but precisely because the drag is free (and the piece not appended to a div), one can
never track the pieces with JavaScript. At best, one knows where the pieces have
been ie the order in which they have left an array.

All the fancy visuals like pieces clicking together and the puzzle assembling itself are
best done on a canvas element, which redraws images at every turn (and has an internal coordinate
frame). In this version of a puzzle, then, the user decides for himself when the puzzle is solved.

Still, one might make the ending joyful. The player who asks to see the image can see it
in full opacity, and growing in a CSS animation(!?). With a few effects thrown in!?

Below: querySelector() only recognizes the original array (Not if we have dragged the element). One could perhaps "do" the puzzle with appendChild().

Adapted form W3 Schools

                                             *     *     *

This code is very fast; the starting div has to be before the receiving one in the
document for the querySelector () function to work...

                                     *     *    *

Works from bottom to top in this version; that is the beauty of 'querySelector ',
one can query anything, in this case, the div's actual id!!

                                        *     *     *

So the puzzle currently doesitself very quickly. Problem is, only if I am working
from the array of pieces. If pieces are scattered, I can't pick them up by id. Soooo
tomorrow, I

need to get a function by index on the array. Tomorrow!