Drag and Drop

The ability to grab elements on a page and drop them somewhere else is another Dhtml technique that improves interactivity.

Prior to the introduction of HTML5's Drag and Drop Api a full understanding of the different event models was required to properly understand the process.

However you should view the code in the examples 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 where we keep track of where we drop the pieces.

Sudoku Drag Drag and drop the squares to make a legal sudoku game.

Colour Sliders A set of sliders built using drag and drop.

Exercise
Build a page that features Drag and drop.