1

我正在编写一个脚本以允许客户端鼠标拖动表格单元格边框并调整表格中的列大小。到目前为止，我在 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 纯粹是通过反复试验得出的。我怀疑这是单元格的实际宽度（包括边框、填充等）与偏移宽度之间的差异。根据我的 css，实际上应该是 10 填充 + 1 左边框 = 11px。要么我的固定填充/边框没有保持固定，要么在 offsetWidth 和元素的实际 with 之间存在一些其他 css 属性。无论浏览器是否缩放，是否有某种方法可以获得元素的实际宽度？

4

1 回答 1

0

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

此外，您应该注意 ev.clientX 在 IE 中已被最近的补丁 (KB2846071) 破坏。如果安装了补丁，clientX 返回一个无意义的结果。希望 MS 会为他们的补丁发布一个补丁！

于 2013-07-17T23:32:16.350 回答