Before writing any JavaScript code to create a functional puzzle, let's write down the features of our puzzle and see how we will achieve them.

When the page loads, an image will be displayed to the user in puzzleContainer, and a Start button will be displayed under it. The image will actually be a collection of 16 different div elements, each having the same background image but a different background position. Using the background-position CSS property, we will be able to display the complete image to the user. Once the Start button is clicked, we will take these 16 images and place them at random positions inside pieceBox. We will also display a 4 x 4 grid, puzzleContainer, where any of the 16 pieces could be dropped. We will then attach appropriate event handlers that will allow us to drag an individual puzzle piece from pieceBox to puzzleContainer. Once a piece has been moved to puzzleContainer, it cannot be dropped back to pieceBox. It can, however, be dragged...