用鼠标调整表格列的大小

Question

我正在编写一个脚本，允许客户端鼠标拖动表格单元格边框并调整表格中的列大小。 到目前为止，我在Firefox中有一个可行的模型，但是宽度测量存在一个缺陷，当更改变大时，鼠标将不同步。 更糟糕的是，该脚本在其他浏览器（opera，safari）中失败，或者即使我在Firefox中更改了浏览器缩放比例，该脚本也无法运行。

function doDrag() {document.body.style.cursor='crosshair';}

function noDrag() {document.body.style.cursor='auto';}

var xpos=0;
var sz=0;
var dragObj = {};
function resizeOn(el) 
    {
    dragObj = document.getElementById(el);
    document.addEventListener("mousemove",resize, true);
    document.addEventListener("mouseup",resizeOff, true);
    }

function resize(ev)
    {
    if(xpos == 0) {xpos=ev.clientX;}
    if(xpos != ev.clientX) 
        {
        sz = dragObj.offsetWidth + (ev.clientX - xpos);
        dragObj.style.width = sz - 10 + "px";
        alert("size="+sz+" offsetwidth="+dragObj.offsetWidth);
        if(dragObj.offsetWidth != sz)
            {
            resizeOff();
            return false;
            }
        xpos=ev.clientX;
        }
    }

function resizeOff() 
    {
    xpos = 0;
    document.removeEventListener("mousemove",resize, true);
    document.removeEventListener("mouseup",resizeOff, true);
    }

HTML看起来像：

<th id="col0" class="edit">client</th>
<th class="drag" onmouseover="doDrag()" onmouseout="noDrag()" onmousedown="resizeOn('col0')"></th>

使第二个单元格显示为第一个单元格的右边缘。

我认为问题是dragObj.style.width = sz-10。-10纯粹是通过反复试验得出的。 我怀疑这是单元格的实际宽度（包括边框，填充等）和offsetwidth之间的差异。 根据我的CSS，实际上应该是10填充+ 1左边框= 11px。 我固定的填充/边框未保持固定，或者offsetWidth与元素的实际with之间存在其他一些CSS属性。 有什么方法可以获取元素的实际宽度，而不管浏览器如何缩放？

Answer 1

请访问www.quirksmode.org和/或http://help.dottoro.com中的文档。 确认目标浏览器是否支持这些属性。 他们还对缩放如何影响offsetX和类似内容发表了评论。

另外，您应该注意，ev.clientX已在IE中被最新补丁（KB2846071）破坏。 如果安装了补丁，则clientX返回无意义的结果。 希望MS会为其补丁发布补丁！