JS drag element principle and implementation code

Drag-and-drop function is mainly used to let the user do some custom actions, such as drag sort, pop-up box drag move, etc., the effect is pretty good. The following explains the principle of drag and drop, I hope to help the needy friends!

I. Drag-and-drop process action
① mouse button down
② Mouse Movement
③ Mouse Release

Second, the corresponding JS event in the drag-and-drop process
① mouse button will trigger onmousedown event

[JavaScript]View PlainCopy

1. Obj.onmousedown = function (e) {
2. //..........  
3. }

② mouse movement triggers onmousemove events

[JavaScript]View PlainCopy

1. Obj.onmousemove = function (e) {
2. //......  
3. }

③ Mouse Loose meeting trigger onmouseup Event

[JavaScript]View PlainCopy

1. Obj.onmouseup = function () {
2. //......  
3. }

Three, the realization of the principle of explanation
Drag is actually achieved by getting the distance of the mouse movement, which is the coordinate (x, y) difference between the coordinates (x, y) of the position before the move and the position in the movement.
When you press or move the mouse, you can get to the current position of the mouse, that is, the position before the move and the position in the move.
So the code above ① and ② should be like this.

[JavaScript]View PlainCopy

1. var mousedownx,mousedowny //due to the need to calculate the mouse offset in the move needs to use the mouse down the coordinates, solid declaration called global variables
2. Obj.onmousedown = function (e) {
3. Mousedownx = E.pagex;
4. Mousedowny = E.pagey;
5. }
7. Obj.onmousemove = function (e) {
8. var Mousemovex = E.pagex,mousemovey = E.pagey;
9. }

Before and after moving the coordinates have, then calculate the offset, look first

It is obvious that the x-coordinate of the moved element is the x-coordinate of the mouse movement-the x-coordinate of the mouse press + the initial x-coordinate of the element
The y-coordinate is the y-coordinate of the mouse movement-the y-coordinate of the mouse press + the initial y-coordinate of the element
The x, y of the new x, y replacement element is taken care of.
Then the code should be replaced with:

[JavaScript]View PlainCopy

2. var mousedownx,mousedowny,initx,inity,flag = false;
4. Obj.onmousedown = function (e) {
6. //x, y coordinates of mouse when mouse is pressed
8. Mousedownx = E.pagex;
10. Mousedowny = E.pagey;
14. //x, y coordinates of the initial position
16. INITX = Obj.offsetleft;
18. inity = Obj.offsettop;
22. //Indicates that the mouse has been pressed
24. Flag = true;
26. }
28. Obj.onmousemove = function (e) {
30. //Make sure the mouse is pressed
32. if (flag) {
34. var Mousemovex = E.pagex,mousemovey = E.pagey;
36. this.style.left = parseint (Mousemovex)-parseint (MOUSEDOWNX) + parseint (INITX) + "px";
38. this.style.top = parseint (Mousemovey)-parseint (Mousedowny) + parseint (inity) + "px";
40. }
44. }
46. Obj.onmouseup = function () {
48. //logo has released the mouse
50. Flag = false;
52. }

Note that if you write with the jquery library, the three events are MouseDown, MouseMove, MouseUp, with a slightly different name.

Also, the style of the dragged element is set to an absolute or relative position to be effective.

At this point, the simplest element drag-and-drop function is finished ~ ~ ~

If there is an incorrect place, please correct me!

JS drag element principle and implementation code