Native js achieves the drag-and-drop login box effect, and js-drag Login
Implementation Principle
1. When the onmousemove event is triggered, the cursor pageXY is constantly updated to change the position,
Offset of the login box = current cursor position-distance from the mouse to the border of the login box
2. When the onmousedown mouse is pressed, the trigger event gets the distance from the mouse to the login box, and then sets true to allow drag
3. onmouseup
4. Formula for displaying the logon box in the center: (visible area width and height-Logon area width and height)/2
5. When the browser window size changes, the event window. onresize is triggered, and the center of the logon box is updated.
Detailed comments in the code
Complete code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!