關(guān)注技術(shù)，關(guān)注生活

問(wèn)題起因：
在原來(lái)產(chǎn)品中實(shí)現(xiàn)的 ajax tree上面添加拖拽效果，為了方便，使用了prototype來(lái)簡(jiǎn)化開(kāi)發(fā)。代碼中使用了Poistion.absolutize來(lái)改變拖動(dòng)標(biāo)簽時(shí)改變它的坐標(biāo)為絕對(duì)坐標(biāo)顯示，拖動(dòng)結(jié)束后再使用Poistion.relativize變回相對(duì)坐標(biāo)。

解決過(guò)程：
其實(shí)一開(kāi)始測(cè)試時(shí)都挺好的，但后來(lái)在tree上面使用時(shí)就發(fā)生問(wèn)題了，在拖動(dòng)過(guò)程，標(biāo)簽跟著鼠標(biāo)的移動(dòng)而改變，沒(méi)有問(wèn)題，但在鼠標(biāo)釋放后，標(biāo)簽并沒(méi)有放置在鼠標(biāo)釋放的位置，而是向左和向上偏移了，而這偏移的距離剛好就是tree顯示位置的left和top。在對(duì)拖動(dòng)結(jié)束后的位置計(jì)算的代碼，拖動(dòng)過(guò)程坐標(biāo)計(jì)算的代碼debug了一天沒(méi)有收獲后，突然想到把樣式中的滾動(dòng)條設(shè)置（overflow-x : "auto", overflow-y: "scroll",）刪掉試下，沒(méi)想到就可以了。

經(jīng)過(guò)反復(fù)驗(yàn)證，終于證實(shí)是滾動(dòng)條惹的禍，接著就跟蹤了prototype中的相關(guān)代碼，在實(shí)現(xiàn)Position.absolutize方法時(shí)是這樣寫的：

Position.absolutize? = ? function (element)? {
????element? = ?$(element);
???? if ?(element.style.position? == ?'absolute')? return ;
????Position.prepare();

var ?offsets? = ?Position.positionedOffset(element);

???? var ?top????? = ?offsets[ 1 ];
???? var ?left???? = ?offsets[ 0 ];
???? var ?width??? = ?element.clientWidth;
???? var ?height?? = ?element.clientHeight;

????element._originalLeft??? = ?left? - ?parseFloat(element.style.left?? || ? 0 );
????element._originalTop???? = ?top?? - ?parseFloat(element.style.top? || ? 0 );
????element._originalWidth?? = ?element.style.width;
????element._originalHeight? = ?element.style.height;

????element.style.position? = ?'absolute';
????element.style.top???? = ?top? + ?'px';
????element.style.left??? = ?left? + ?'px';
????element.style.width?? = ?width? + ?'px';
????element.style.height? = ?height? + ?'px';
} ;

其中Position.positionedOffset就是取當(dāng)前標(biāo)簽到body的偏移量，然后將信息存入_original*的相關(guān)屬性中，等到調(diào)用Position.relativize時(shí)，再?gòu)倪@些_original*屬性中從新計(jì)算出當(dāng)前標(biāo)簽的相對(duì)位置。
再看一下Position.relativize的實(shí)現(xiàn)：

Position.relativize?=?function(element)?{
????element?=?$(element);
????if?(element.style.position?==?'relative')?{
????????return;????
????}
????
????Position.prepare();
????
????element.style.position?=?'relative';
????var?top??=?parseFloat(element.style.top??||?0)?-?(element._originalTop??||?0);
????var?left?=?parseFloat(element.style.left?||?0)?-?(element._originalLeft?||?0);
????element.style.left???=?left?+?'px';
????element.style.top????=?top??+?'px';
????element.style.height?=?element._originalHeight;
????element.style.width??=?element._originalWidth;
};

嗯，處理得非常漂亮，沒(méi)有存在什么問(wèn)題，以下是用來(lái)測(cè)試有html，試下會(huì)有什么效果

<div?style="height:50px"></div>
<div?style="width:500px;overflow-y:auto;height:300px">
<div?style="height:200px"></div>
<div?style="height:300px">
<div?id="test"?style="height:20px">test</div>
????<input?type="button"?value="abs"?onclick="Position.absolutize('test');">
????<input?type="button"?value="rel"?onclick="Position.relativize('test');">
????</div>
</div>

沒(méi)錯(cuò)，按下abs按鈕后，test向下移了50px左右(第二個(gè)div的offsetTop)，也向右移了一點(diǎn)（第二個(gè)div的offsetLeft）。（如果把overflow-y:aut去掉，則沒(méi)有此情況出現(xiàn)）而再按下rel按鈕后，test能回復(fù)正常的位置，這就表示它在算法上沒(méi)有什么問(wèn)題，問(wèn)題出在了absolutize后的位置上了，而與位置相關(guān)的信息有 _originalTop 和_originalLeft，而它們的值是與Position.positionedOffset直接相關(guān)的，再查看了Position.positionedOffset的代碼：

Position.positionedOffset?=?function?(element)?{????
????var?node?=?element.parentElement;????
????var?valueT?=?0,?valueL?=?0;
????
????do?{
????????valueT?+=?element.offsetTop?||?0;
????????valueL?+=?element.offsetLeft?||?0;
????????element?=?element.offsetParent;
????????if?(element)?{????????
????????????p?=?Element.getStyle(element,?"position");
????????????if?(p?==?"relative"?||?p?==?"absolute"?){
????????????????break;
????????????}
????????}
????}?while?(element);????????
????
????return?[valueL,?valueT];
};

看起來(lái)似乎也無(wú)法從中找出什么毛病來(lái)。可是，查了一下html的相關(guān)文檔后，發(fā)現(xiàn)這段代碼存在著相當(dāng)嚴(yán)重的bug。html文檔里，當(dāng)樣式position取絕對(duì)坐標(biāo)"absolute "時(shí)，其內(nèi)容如下：
absolute ：Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned—using the top and left properties.
結(jié)合文檔內(nèi)容，經(jīng)過(guò)測(cè)試，如果標(biāo)簽的所有祖先節(jié)點(diǎn)中，有任何一個(gè)是可滾動(dòng)的（overflow,overflow-y,overflow-x其中一個(gè)屬性的值為auto或scroll），那標(biāo)簽的絕對(duì)定位就是在此標(biāo)簽中的坐標(biāo)位置，而不是對(duì)于BODY的。
所以positionedOffset方法沒(méi)有考慮到這種情況而處理，當(dāng)然在一般情況下行得通了，所以代碼更改如下：

Position.positionedOffset?=?function?(element)?{????
????????
????/**//*
?????*?經(jīng)過(guò)測(cè)試，如果標(biāo)簽的所有祖先節(jié)點(diǎn)中，有任何一個(gè)是可滾動(dòng)的（overflow,overflow-y,overflow-x其中一個(gè)屬性的值為auto或scroll），
?????*?那標(biāo)簽的絕對(duì)定位就是在此標(biāo)簽中的坐標(biāo)位置，而不是對(duì)于BODY的。所以在返回時(shí)應(yīng)該將此祖先節(jié)點(diǎn)對(duì)于body的偏移量減掉.
?????*/
????????
????var?valueT?=?0,?valueL?=?0;
????
????do?{
????????valueT?+=?element.offsetTop?||?0;
????????valueL?+=?element.offsetLeft?||?0;
????????element?=?element.offsetParent;
????????if?(element)?{
????????????var?scrollable?=?[element.style.overflow,?element.style.overflowX,?element.style.overflowY];
????????????p?=?Element.getStyle(element,?"position");
????????????if?(p?==?"relative"?||?p?==?"absolute"?||?scrollable.include(?"auto"?)?||?scrollable.include(?"scroll"?))?{
????????????????break;
????????????}
????????}
????}?while?(element);????????
????
????return?[valueL,?valueT];
};