Click to display the displayed window that can be dragged. Drag to display the window.

Click to display the displayed window that can be dragged. Drag to display the window.

Click to display the displayed window that can be dragged:
This topic describes how to implement a popular effect. You can click a button to bring up a center window, which can be dragged at will. Click the upper right corner to close the window, the code example is as follows:

<! DOCTYPE html> 
The above Code meets our requirements. click the button to bring up a center window. The following describes its implementation process.
I. Code comments:
1. $ (function () {}). When the document structure is fully loaded, run the code in the function.
2. dragAndDrop () implements the drag function.
3. initPosition (), used to initialize the position.
4. clickShowBtn (). click the button to bring up the window function.
5. function dragAndDrop () {}, which implements the drag function.
6. var _ move = false. Set a flag to indicate whether the current window can be dragged. The default value is false and cannot be dragged.
7. var _ x, _ y, declare two variables, which are used to store the coordinates of the current mouse pointer between the left and top of the window.
8. $ (". wTop"). mousedown (function (e) {}), register the mousedown event handler function for the div.
9. Set _ move to true, indicating that the value of _ move can be dragged.
10. _ x = e. pageX-parseInt ($ (". win" ).css ("left") to calculate the distance between the pointer and the left edge of the window.
11. _ y = e. pageY-parseInt ($ (". win" ).css ("top") to calculate the distance between the mouse pointer and the edge of the window.
12. $ (document ). mousemove (function (e) {}) registers an event handler for the document. The reason why the event handler is registered on the document rather than on the wTop, the event bubbling principle is used to prevent the drag failure caused by drawing wTop with the mouse.
13. if (_ move) {}, if _ move is true, you can drag it.
14. var x = e. pageX-_ x to obtain the left value of the window.
15. var y = e. pageY-_ y to obtain the window top value.
16. $ (". win" ).css ({top: y, left: x}) to set the position of the window.
17. mouseup (function () {_ move = false;}), registers the mouseup event processing function, that is, when the mouse is released, SET _ move to false, that is, the window cannot be dragged.
18. function initPosition () {} is used to set the position when the window pops up.
19. var itop = ($ (document). height ()-$ (". win"). height ()/2, set the window to vertical center.
20. var ileft = ($ (document). width ()-$ (". win"). width ()/2, set the window to horizontally centered.
21. $ (". win" ).css ({top: itop, left: ileft}), set the position.
Ii. Related reading:
1. For details about mousedown events, refer to the mousedown Events section of jQuery.
2. For more information about the e. pageX attributes, see the event. pageX attributes section of jQuery.
3. For the parseInt () function, see section 1 of parseInt () function in javascript.
4. For details about the css () function, see the css () method section of jQuery.
5. For details about the mousemove event, refer to jQuery's mousemove event.
6. For details about mouseup events, refer to the mouseup Events section of jQuery.
7. For details about the height () function, see the height () method section of jQuery.
8. For details about the width () function, see the width () method section of jQuery.
9. For more information about the show () function, see the show () method section of jQuery.
10. For more information about the hide () function, see the hide () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 12642.
For more information, see: http://www.softwhy.com/jquery/