总结一下最近将163邮箱拖动效果改成兼容Firefox遇到的问题

最近在项目中需要做一个分配课题信息的功能,因此想到采用和163邮箱类似的拖动效果来实现

在修改成FireFox兼容浏览时,主要有几个方面的修改:

1. DOM 元素访问时 obj.childNodes[i] 但实际上用IE dev toolbar 和FF Dom查看器发现,对于 <Table>元素
IE 的DOM解析直接childNodes就是<TR>集合,而FF在前后各插入了一个Text Node
因此,最后的解决办法就是
table.childNodes[i]  --> table.getElementByTagName('TR').item(i)
但getElementByTagName并不只对下一级有效,而是table的整个下属html全部检索,这样有嵌套表格是就会有问题,那种情况直接分 IE 与 非IE写两种代码好了。。

var isOpera = sUserAgent.indexOf("Opera") > -1;
var isIE = sUserAgent.indexOf("compatible") > -1
           && sUserAgent.indexOf("MSIE") > -1
           && !isOpera;

2. 设置/获取 obj 的style属性,IE里直接用obj.style.width等即可
在FF里需要 setProperty,getPropertyValue
if (isIE)
    {
        oDiv.style.width = 200;
        oDiv.style.height = 24;      
        oDiv.style.left = event.clientX+10;
        oDiv.style.top = pos[0]+10;
            
        MakeInfoDiv(oDiv);
        dragedTable_x0 = oDiv.style.pixelLeft;
        dragedTable_y0 = oDiv.style.pixelTop;
        dragedTable_x1 = event.clientX;
        dragedTable_y1 = event.clientY;
    }
    else
    {               
        oDiv.style.setProperty('width','200','');    
        oDiv.style.setProperty('height','24','');        
        oDiv.style.setProperty('left',event.clientX+10+'px','');    
        oDiv.style.setProperty('top',pos[0]+10+'px','');
        MakeInfoDiv(oDiv);     
        dragedTable_x0 = oDiv.style.getPropertyValue('left');            
        dragedTable_y0 = oDiv.style.getPropertyValue('top');
        dragedTable_x1 = event.clientX;
        dragedTable_y1 = event.clientY;
    }

3. 事件event对象  IE 里面通过event.srcElement 而FF是event.target,而且需要将event作为参数传递进来
document.onmousemove = function(event)
{
  if(isIE)
    dragDiv(window.event);
   else
   {   
    dragDiv(event);   
    }
}

4. FF里默认window.status是只读的,不能修改,需要在浏览器里打开相关设置

原文地址:https://www.cnblogs.com/calmzeal/p/791295.html