So far, we have seen two examples with draggable, droppable, and slider. For our last implementation, we will use the sortable component of jQuery UI.

We will generate a five-digit number on the server side and display it to the user. Then, we will display five digits of the same numbers in random order and ask the user to arrange them using sortables to make the original number. However, this time there will be a difference in how we display the original number. Instead of printing the five-digit number directly on the screen, we will display it as an image. To do this, we will need an image of all 10 digits from zero to nine. This can be created as a single sprite of 10 images. We will then create five div elements, set the background image to the sprite image, and appropriately calculate and apply the background position property to display the correct number. You can find this image in the code bundle. Look inside the Chapter5 folder for an image named sprite...