我写UI之仿google新标签页快速拨号

DEMO：

说明：

• DragBlock:定义模块类，四个set方法和一个animate方法。
• Drag:定义拖拽行为。
• Gdrag:定义整个快速拨号的类，@params:｛String｝ containerId,  {Array} data,  {Object} options

发现问题：

<div id="tst" style="position:relative; border:13px solid #CCC; height:200px; overflow:hidden;">
	<div id="inner" style=" position:absolute; top:0; left:0; height:50px; width:50px; background:#6CC;" ></div>
</div>
<script type="text/javascript" >
var  tst=document.getElementById("tst"),
	 inner=document.getElementById("inner");
document.write("offsetLeft:"+inner.offsetLeft+" offsetTop:"+inner.offsetTop);
</script>

上面的代码在各浏览器下的代码如下：

IE6	IE7	IE8	firefox 5.0	chorme	safari	opera 11.10
0	0	13	-13	0	0	13

MDC:Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

说的是返回当前元素的左上角相对于其offsetParent结点左偏移的像素值，并没个具体说明对offsetParent的border的处理，MSDN上的说法也差不多，对border处理一样没说明。

在CSSOM View Module:Return the result of subtracting the x-coordinate of the left padding edge of the offsetParent of A from the x-coordinate of the left border edge of A, relative to the initial containing block origin.

这里的A指的就是current element。说的是：返回A的border edge的x坐标减去A的padding edge的x坐标，相对于containing block。这说明返回0的是标准的，对于IE8和opera没什么说的，这两兄弟经常有自己的想法。对于firefox就有点诡异了，当子元素的positon属性为absolute而offsetParent的overflow为hidden、auto、scroll的时候，子元素的offsetLeft（offetTop）就会受offsetParent的负border宽度的影响。而且5.0下还是这样就有点不理解（望有想法的大牛指点）。

我的解决办法：

var repair=function(){
        var container=document.body,wrap=document.createElement("div"),checkBox,offsetRepair,
            html="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;overflow:hidden'><div style='position:absolute;top:0;left:0;'></div></div>";
        with(wrap.style){
            position="absolute";
            margin=padding=top=left=0;
            height=width="1px";
            visibility="hidden";
        }
        wrap.innerHTML=html;
        container.insertBefore(wrap,container.firstChild);
        checkBox=wrap.firstChild.firstChild;
        offsetRepair=(checkBox.offsetLeft/5);
        container.removeChild(wrap);
        repair=function(){
            return offsetRepair;        
        };
        return offsetRepair;
}

参考了jQuery，采用了插入检测的办法。在body中动态插入这么一段可能出现问题的代码，取得offset返回值，跟据返回值作判断。

收获：

会做和做好，是两个完全不同的概念。有很多会写拖拽，写得好的我想一定会在这个“很多”数量级上减去一部分。cloudgamer的拖拽让我理解到了少东西，也完善了很多，十分感谢！

完整下载 加上去的样式没了，又怎么也加不上