HTML5: Your visual blueprint™ for designing rich web pages and applications

HANDLE THE DRAG-AND-DROP EVENTS

After you have the draggable and drop zone elements established and functions registered for the drag-and-drop events, you are ready to provide the JavaScript code to handle the events’ transactions. There are three stages in the drag-and-drop workflow described in this section, and all three are required to fully support drag and drop in your website.

Stage one of three, handling the drag-start event, consists of three parts: First, store the source drag element into a global variable; second, specify which type of drop effects are allowed; third, store any data that will be passed from this draggable object into the drop zone element:

 var srcDragElement; function onDragStart(event) { srcDragElement = this; ...