HTML5 Canvas, 2nd Edition

Creating the Drag-and-Drop Application

When creating our drag-and-drop application, we need to accomplish the following:

• We will create objects that can be clicked on to decorate a Christmas tree and can be dragged, dropped, and dragged again.

• We need to make the Canvas think it works in “retained mode” so that we can keep track of multiple objects. To do this, we need to create a “display list” of objects.

• We need to add the ability for these Canvas objects to listen to “events,” and we need to have a way for mouse events to be “broadcast” events to objects that need to “hear” them.

• We want to change the mouse pointer to a hand cursor when it is over objects that can be clicked to make the application act like it might in Flash or Silverlight.

• The application will actually be a “click and stick” version of drag and drop. This means that when you click on an item, it sticks to the mouse until you click the mouse again.