JS implementation of dragging sample code_javascript skills

getBoundingClientRect() to get the position of the page element

Copy code The code is as follows:

document.documentElement .getBoundingClientRect

This method returns an object to obtain the left, top, right and bottom positions of an element on the page relative to the browser window, which represent the top, left and right of the element respectively. , the offset pixel values ​​of the lower four boundaries relative to the upper left corner of the browser window (note, not the upper left corner of the document area). And this method is no longer IE Only. FF3.0 and Opera9.5 already support this method. It can be said that the efficiency of obtaining the position of page elements has been greatly improved, so obtaining an element on the page is compared with browsing. The offset of the browser window becomes the use of getBoundingClientRect. According to an article, it's awsome, so handsome =. =Because you don’t have to worry about offset, pagex, clientx, etc., etc. In previous versions of Opera and Firefox, it was necessary to loop through to obtain the absolute position of an element on the page.


Code example:

Copy code The code is as follows:

For convenience, the Demo directly uses absolutely positioned elements

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills