In this lesson, you learn how to:
Get the mouse pointer's location.
Move an element on the page.
Use events to facilitate drag-and-drop.
You then apply this information by writing a drag-and-drop script.
For drag-and-drop, the most important piece of information you need is the mouse pointer's coordinates. But you actually need this information represented in two different ways. First you need to know the mouse pointer's coordinates in relation to the page; without them you don't know where to drag the item to.
You also need to know the mouse pointer's position in relation to the HTML element you want to drag. This is important because you want to maintain the mouse pointer's position on the element while you drag it to a new location. Without this information, clicking and dragging an element would result in the element's top left corner snapping to the mouse pointer, as shown in Figure 24-1.
Figure 24.1. Figure 24-1
Let's start by getting the mouse pointer's location in relation ...