JS實現拖動範例程式碼

getBoundingClientRect() 來擷取頁面元素的位置
複製代碼 代碼如下:
document.documentElement.getBoundingClientRect

該方法返回一個對象，從而獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置，即分別代表該元素上、左、右、下四條邊界相對於瀏覽器視窗左上方（注意，不是文檔地區的左上方）的位移像素值。並且該方法已經不再是IE Only了，FF3.0+和Opera9.5+已經支援了該方法，可以說在獲得頁面元素位置上效率能有很大的提高，所以擷取頁面上某個元素相對於瀏覽器視窗的位移量就成了getBoundingClientRect的用武之地了，按照一篇文章的說法，it's awsome，太帥了=。=因為不必糾結於offset、pagex、clientx等等等等等等。在以前版本的Opera和Firefox中必須通過迴圈來獲得元素在頁面中的絕對位置。
 
 
程式碼範例：
複製代碼 代碼如下:
<span style="font-size:14px"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>

<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo為了方便就直接用絕對位置的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
if (document.documentElement.getBoundingClientRect) {
alert("left:"+this.getBoundingClientRect().left)
alert("top:"+this.getBoundingClientRect().top)
alert("right:"+this.getBoundingClientRect().right)
alert("bottom:"+this.getBoundingClientRect().bottom)
<strong>var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;</strong>
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script></span>