We're going to create a web game that will utilize the Drag and Drag.Move plugins. There will be a small gray box that you can drag around the web page (called a draggable). There will also be a larger box to drag to (called a droppable). When the draggable is dropped inside the droppable, you get 1 point.
First, we will set up the HTML. We contain the draggable and droppable elements inside a div called
#drag-container. The draggable element will have an ID of#draggableand the droppable element will have an ID of#dropbox. Finally, we have a section for placing the user's score called#log.<body> <h1>Drag and Drop</h1> <p><strong>Instructions</strong>: drag the smaller gray box inside the larger box. You get 1 point for each successful drop.</p> <div id="drag-container"> <div id="draggable"> </div> <div id="dropbox">Drag stuff here.</div> </div> ...