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和元素的实际内容之间存在其他一些css属性。无论浏览器是否缩放，是否有某种方法可以获得元素的实际宽度？

Answer 1

查看www.quirksmode.org和/或http://help.dottoro.com中的文档。确认目标浏览器是否支持这些属性。他们还有关于缩放如何影响offsetX和类似的评论。

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

使用鼠标调整表格列的大小

1 个答案: