最近在项目中需要做一个分配课题信息的功能,因此想到采用和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是只读的,不能修改,需要在浏览器里打开相关设置