Home > Web Front-end > JS Tutorial > JS implementation of dragging sample code_javascript skills

JS implementation of dragging sample code_javascript skills

WBOY
Release: 2016-05-16 17:17:59
Original
1398 people have browsed it

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.
JS implementation of dragging sample code_javascript skills
JS implementation of dragging sample code_javascript skills
Code example:
Copy code The code is as follows:





Demo



For convenience, the Demo directly uses absolutely positioned elements



Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template