We've now reached the point where we can have a little fun by putting what we've learned about these two components into a fully working example. In our final drag and drop example, we're going to combine both of these components to create a simple maze game. The game will consist of a draggable marker that will need to be navigated through a simple maze to a specified droppable at the other end of the maze. We can make things a little more challenging, so that if any of the maze walls are touched by the marker it will return to the starting position.
The following screenshot shows what we're going to build:
Let's start with the markup. In a new page in your text editor, add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/dragMaze.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf...