On the _javascript techniques of JavaScript animation simulation drag-and-drop principle

Simulate drag-and-drop principle:

X1 equals Div.offsetleft

Y1 equals div.offsettop

X2 equals Ev.clientx (EV represents event event)

Y2 equals ev.clienty

When we press the mouse on the square, the x2-x1 can be determined. After moving the mouse, we use the mouse current position is x4, Y4 minus x2-x1, y2-y1 can get the square now position.

Code:

 <! DOCTYPE html> 
 

Optimized code:

"1" mouse move quickly, the mouse will move out of the box, then the box will no longer follow the mouse move.

Solution: Add onmousemove and OnMouseUp to the Document object

Code:

 <! 
  DOCTYPE html>  
 

"2" triggers the browser's default behavior when there is text in the square you want to drag

WORKAROUND: 1, use return False to add to the OnMouseDown event block browser default behavior (except IE)

2. Use global Capture (IE)

1. Use return False to add to the OnMouseDown event block browser default behavior (except IE)

Code:

 <! DOCTYPE html>  

2. Use global Capture (IE)

Global capture: When we give an element a global capture, the modifier listens to all subsequent events and triggers the changed event when an event occurs

Code:

 <! DOCTYPE html>
 
 <! DOCTYPE html>  

"3" Package simulation drag function

Code:

 <! DOCTYPE html>  

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!