Web Front-End Development Learning----11. JQuery to achieve simple drag-and-drop effect

Drag-and-drop effects are common in Web pages. It is not difficult to achieve. Record the simple effect of today's implementation.

Drag and Drop Demo

When you drag quickly, there is a problem and you can modify it later.

To be blunt, there are 3 click events.

1. Press the left mouse button, triggering the Click event, the record can get the mouse relative to the position of the drag control (current mouse position-control position);

2. Drag the mouse, trigger the move event, you can calculate the distance of the mouse movement (the current mouse position-calculated relative position), that is, drag the control to move the distance;

3. Mouse lift, end drag.

In JQ, Event.pagex Event.pagey can get the location of the mouse, relative to the upper-left corner of the document.

As shown in figure:

Note that when JQ gets the location of the control:

X=event.pagex-parseint ($ ("#box"). CSS ("left");
Y=event.pagey-parseint ($ ("#box"). CSS ("top");

To remove the unit px.

However, when you modify the control position, do not add units, do not add quotes, and do not add unit px.

Dx=event.pagex-x;
Dy=event.pagey-y;
Do not put quotes ...
$ ("#box"). CSS ({
' Top ':d y, ' left ':d x
})

Complete code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">