拖动jQuery代码头边框线调整表列宽度效果

类似于桌面应用程序的形式拖头，当鼠标停留在标头的边框线，老鼠说会成为左右形状拖动，然后拖动鼠标，一个垂直线的老鼠出现在餐桌上，然后释放鼠标，表列将调整。最近更自由，我们尝试要实现它，在这里分享小结果。

首先，您需要找到如图所示的鼠标图标文件，并在硬盘中搜索*。

为了所有需要页面使用的效果，并且不需要对页面HTML进行任何更改，我把所有的代码都集成在$（文档）中。Ready（函数（））}，并编写一个单独的js文件。

用一个1像素宽的div模拟一条垂直线，添加到页面中的体元素中。
$（文档）Ready（函数（）{）
$（）；
}）；
接下来是鼠标移动到表的垂直边界上的鼠标变化问题。首先，我认为增加一个小的块级元素的头trigger MouseMove和mouseout事件。但是为了简单起见，我选择将这个事件添加到整个头文件中。

在TH MouseMove事件处理鼠标的变种：
$（日），Bind（MouseMove
var = $（this）；
对第一个和最后一个列添加效果
如果（TH。prevall）。Length（TH。nextall）（。长度<= 1 | |＜1）{
返回；
}
VaR左= th.offset（左）；
大约4米的距离/边界像素触发效应
如果（event.clientx，左＜4 | |（TH。宽度）-（event.clientx -（左））{ < 4）
Th.css（{ 'cursor '：' / / /框架的Web网页/图像/ splith .cur}）；
对路径中的鼠标图标进行了修改
}
{其他
Th.css（{ 'cursor：'default}）；
}
}）；
当鼠标被按下时，一个显示器，并设置它的高度，CSS属性的位置，并记录当前来改变TH对象的列的宽度，因为两个共享的边界线总是来自一个TH对象的顶部。

$（日），Bind（mouseDown
var = $（this）；
随着鼠标移动/判断相同的功能
如果（TH。prevall）（长度＜1）| th.nextall（长度＜1）{
返回；
}
VaR POS = th.offset（）；
如果（event.clientx，pos.left＜4 | |（TH。宽度）-（event.clientx -（pos.left））{ < 4）
VaR高度= th.parent（）。父（）Height（）；
var = pos.top；
$（#线）。Css（{高度：高度，顶：顶，左：event.clientx，显示}）；
表示当前值的全局变量用于调整状态的列宽度。
共同行动=真；
始终要获取一个对象
如果（event.clientx - pos.left < th.width（） / 2）{
currth = th.prev（）；
}
{其他
currth =日；
}
}
}）；
接下来是鼠标移动，移动的效果，因为需要当鼠标离开TH元素会有这种效果，在身体成分的MouseMove功能写作的影响
$（体），Bind（MouseMove
如果（共同行动= = true）{
$（#线）。Css（{左：事件。ClientX }）显示（）；
}
}）；
最后是鼠标，最后调整列宽度的影响。这里我添加相同的MouseUp代码体的两个要素。我以为我只需要添加MouseUp函数体，但我不明白为什么老鼠没有触发，所以我不得不添加代码号元。水平有限，和代码是完全重复下面不知道如何把它拔出来。

$（体），Bind（MouseUp
如果（共同行动= = true）{
$（#线）藏（）；
共同行动= false；
VaR POS = currth.offset（）；
VaR指标= currth.prevall（长度）；
CurrTh.width（event.clientx - pos.left）；
currth.parent（）。父（），发现（TR）。每个（函数（）{（）
$（这）。孩子们（）。情商（指数），Width（event.clientx - pos.left）；
}）；
}
}）；
$（日），Bind（MouseUp
如果（共同行动= = true）{
$（#线）藏（）；
共同行动= false；
VaR POS = currth.offset（）；
VaR指标= currth.prevall（长度）；
CurrTh.width（event.clientx - pos.left）；
currth.parent（）。父（），发现（TR）。每个（函数（）{（）
$（这）。孩子们（）。情商（指数），Width（event.clientx - pos.left）；
}）；
}
}）；
那么，只要包含上述代码的js文件在需要此效果的页面中引入，就可以将此效果添加到页面中的表中。

此外，使用自定义鼠标图标在Firefox的代码有没有效果，并用jQuery 1.2.6

效果文件下载

----……---更新

至于拖动时会选择的bug，请将下面的行添加到$（文档）。就绪函数
$（体），Bind（selectstart