JS實現(xiàn)拖動示例代碼
更新時間：2013年11月01日 17:16:42 作者：
JS實現(xiàn)拖動的方法有很多，在本文將為大家介紹下使用getBoundingClientRect()方法是如何實現(xiàn)的，感興趣的朋友不要錯過
getBoundingClientRect() 來獲取頁面元素的位置
document.documentElement.getBoundingClientRect
該方法返回一個對象，從而獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置，即分別代表該元素上、左、右、下四條邊界相對于瀏覽器窗口左上角（注意，不是文檔區(qū)域的左上角）的偏移像素值。并且該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說在獲得頁面元素位置上效率能有很大的提高，所以獲取頁面上某個元素相對于瀏覽器窗口的偏移量就成了getBoundingClientRect的用武之地了，按照一篇文章的說法，it's awsome，太帥了=。=因為不必糾結(jié)于offset、pagex、clientx等等等等等等。在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁面中的絕對位置。
代碼示例：
<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>
復(fù)制代碼 代碼如下:
document.documentElement.getBoundingClientRect
該方法返回一個對象，從而獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置，即分別代表該元素上、左、右、下四條邊界相對于瀏覽器窗口左上角（注意，不是文檔區(qū)域的左上角）的偏移像素值。并且該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說在獲得頁面元素位置上效率能有很大的提高，所以獲取頁面上某個元素相對于瀏覽器窗口的偏移量就成了getBoundingClientRect的用武之地了，按照一篇文章的說法，it's awsome，太帥了=。=因為不必糾結(jié)于offset、pagex、clientx等等等等等等。在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁面中的絕對位置。
代碼示例：
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
關(guān)于JS中match() 和 exec() 返回值和屬性的測試
這篇文章主要介紹了關(guān)于JS中match() 和 exec() 返回值和屬性的測試 的相關(guān)資料,需要的朋友可以參考下2016-03-03
在JavaScript開發(fā)中,錯誤處理是一個不可忽視的重要環(huán)節(jié),本文將深入探討JavaScript中的錯誤處理機制,包括錯誤的類型、捕獲與拋出錯誤的方法,需要的可以參考下2024-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)循環(huán)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實例代碼分析的相關(guān)資料,需要的朋友可以參考下2017-01-01
下面小編就為大家?guī)硪黄獪\談原型對象的常用開發(fā)模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Angular 頁面跳轉(zhuǎn)時傳參問題的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
JavaScript Memoization 讓函數(shù)也有記憶功能
函數(shù)可以用對象去記住先前操作的結(jié)果，從而能避免無謂的運算，這種優(yōu)化被稱為記憶（Memoization）。JavaScript 的對象和數(shù)組要實現(xiàn)這種優(yōu)化是非常方便的。2011-10-10
本文介紹了利用Array.prototype.sort方法和Math.random()實現(xiàn)快速打亂數(shù)組的方法，大家參考使用吧2014-01-01
這篇文章主要介紹了js實現(xiàn)文本框支持加減運算的方法,可實現(xiàn)文本框輸入加減運算式同時右側(cè)實時顯示對應(yīng)計算結(jié)果的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)硪黄仙Ｕ刯acascript DOM節(jié)點獲取。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04