這個系列文章主要是講述實現javascript拖拽功能的基礎知識，并將在最后給出一個完整的示例。適合對拖拽完全不懂的人閱讀。
第一篇就先講講Javascript中的offsetParent屬性吧。
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
element.offsetParent
Summary
offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent . offsetParent returns null when the element has style.display set to "none".
Syntax
parentObj = element.offsetParent
Parameters
· parentObj is an object reference to the element in which the current element is offset.
Specification
DOM Level 0. Not part of specification.
節選自Mozilla Developer Center網站
翻譯如下：
element.offsetParent
總結
offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位 , 則 offsetParent 屬性的取值 為根元素 ( 在標準兼容模式下為html元素；在怪異呈現模式下為body元素 ) 的引用 。 當容器元素的 style.display 被設置為 "none" 時 （譯注：IE和Opera除外）， offsetParent 屬性 返回 null 。
句法
parentObj = element.offsetParent
變量
· parentObj 是一個元素的引用，當前元素的偏移量在其中計算。
規范
DOM Level 0. 并非規范的一部分 .
測試代碼1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < title > Untitled Document </ title > < script type = "text/javascript" language = "JavaScript"> function offset_init (){ var pElement = document . getElementById ( "sonObj" ); parentObj = pElement . offsetParent ; alert ( parentObj . tagName ); } </ script > </ head > < body onload ="offset_init () " > < div id = "parent"> < p id = "sonObj"> 測試OffsetParent屬性 </ p > </ div > </ body > </ html > 測試結果： Firefox3："BODY" Internet Explorer 7："BODY" Opera 9.51："BODY" Chrome 0.2："BODY" Safari 3："BODY" 結論： 當某個元素及其父元素都未進行CSS定位時，則這個元素的offsetParent屬性的取值為根元素。更確切地說，這個元素的各種偏移量計算（offsetTop、offsetLeft等）的參照物為Body元素。（其實無論時標準兼容模式還是怪異模式，根元素都為Body元素） 測試代碼2： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < title > Untitled Document </ title > < style type = "text/css"> #parent { position : absolute ; <!-- position：relative; -- > left : 25px ; top : 188px ; border : 1px solid black ; } </ style > < script type = "text/javascript" language = "JavaScript"> function offset_init (){ var pElement = document . getElementById ( "sonObj" ); parentObj = pElement . offsetParent ; alert ( parentObj . tagName ); } </ script > </ head > < body onload ="offset_init () " > < div id =" parent ">div測試代碼<p id=" sonObj ">測試OffsetParent屬性</p></div> </ body > </ html > 測試結果： Firefox3："DIV" Internet Explorer 7："DIV" Opera 9.51："DIV" Chrome 0.2："DIV" Safari 3："DIV" 結論： 當某個元素的父元素進行了CSS定位時（absolute或者relative），則這個元素的offsetParent屬性的取值為其父元素。更確切地說，這個元素的各種偏移量計算（offsetTop、offsetLeft等）的參照物為其父元素。 測試代碼3：
新聞熱點
疑難解答
