The ability to grab elements on a page and drop them somewhere else is another Dhtml technique that improves interactivity.
A full understanding of the different event models is required to properly understand the process.
In this course it is sufficient to 'steal and manipulate' parts of my code from the link below.
However you should view the code in the example to get a feel for how the code works.
The code uses browser sniffing techniques to make it cross browser compatible.
There are three functions
startdrag() - which runs when the user holds the mouse button down on an object.
drag() - which keeps track of where the object is and updates its position
on screen.
stopdrag() - which is used to release the object
Finally you must make sure that each object you want to be able to drag has it position properties set.
Drag and Drop A working example of cross browser compatible Drag and Drop.
Drag and Drop Chess game - Example of keeping track of dragged objects.
Sudoku Drag Drag and drop to make sudoku squares - Use my external drag and drop library, dragcode.js.
TimeLine Drag and Drop Quiz
Colour Sliders A set of sliders built using drag and drop.
Exercise
Build a page that features Drag and drop.