JS實作拖曳範例程式碼_javascript技巧

getBoundingClientRect() 來取得頁面元素的位置

documdm. .getBoundingClientRect

此方法傳回一個對象，從而獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置，即分別代表該元素上、左、右、下四條邊界相對於瀏覽器視窗左上角（注意，不是文件區域的左上角）的偏移像素值。而該方法已經不再是IE Only了，FF3.0 和Opera9.5 已經支援了該方法，可以說在獲得頁面元素位置上效率能有很大的提高，所以獲取頁面上某個元素相對於瀏覽器視窗的偏移量就成了getBoundingClientRect的用武之地了，按照一篇文章的說法，it's awsome，太帥了=。 =因為不必糾結於offset、pagex、clientx等等等等等等。在先前版本的Opera和Firefox中必須透過循環來獲得元素在頁面中的絕對位置。
alert("right:" this.getBoundingClientRect().right) alert("bottom:" this.getBoundingClientRect().bottom) var X= this.getBoundingClientRect(). left document.documentElement.scrollLeft; var Y = this.getBoundingClientRect().top document.documentElement.scrollTop; alert("Demo的位置是X:" X ";Y:" Y ) } }