用鼠标调整表格列的大小

Question

I am writing a script to allow a client to mouse drag table cell borders and resize columns in a table. So far I have a working model in Firefox but there is a flaw in width measurement that leaves the mouse out of sync when the change gets large. Worse, the script fails in other browsers (opera,safari) or even if I change the browser zoom in 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);
    }

The HTML looks like:

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

The second cell is made to appear as the right edge of the first.

I assume the problem is dragObj.style.width = sz - 10. The -10 was derived purely by trial and error. I suspect this is the difference between the actual width of the cell including borders, padding etc and offsetwidth. It should really be, per my css, 10 for padding + 1 for the left border = 11px. Either my fixed padding/borders aren't staying fixed or there is some other css property between the offsetWidth and the actual with of the element. Is there some way to get the actual width of the element regardless of the browsers scaling?

Answer 1

Have a look at the documentation in www.quirksmode.org and/or http://help.dottoro.com . Confirm whether the properties are supported by your target browser. They also have comments on how zoom affects offsetX and similar.

Also, you should note that ev.clientX has been broken in IE by a recent patch (KB2846071). If the patch is installed, clientX returns a meaningless result. Hopefully MS will release a patch for their patch!