JQuery drag table header border line to adjust table column width effect code_jquery

Similar to the effect of dragging the header of a table in a desktop program, when the mouse stays on the border line of the header, the mouse will change into a shape indicating dragging left and right. Then drag the mouse, and a line will appear in the table. The vertical line moves with the mouse. Finally, when the mouse is released, the table column width will be adjusted. I have been free recently, so I tried to implement it myself, and I would like to share the small results here.

First you need the mouse icon file as shown in the picture. Search for *.cur in your hard drive and you will definitely find it.

In order to be able to use this effect on all pages without changing any HTML on the page, I integrated all the code in $(document).ready(function() {}); and wrote a separate JS file.

Use a 1 pixel wide DIV to simulate a vertical line and add it to the body element after the page loads

$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});

The next step is the problem of mouse deformation when the mouse moves to the vertical border of the table. At first I considered adding a small block-level element in the table header to trigger the mousemove and mouseout events, but for the sake of simplicity, I chose to change the mouse movement for the entire table. Add this event to the header.

Handle mouse transformations in TH's mousemove event:

$("th").bind("mousemove", function(event) {
var th = $(this);
//不给第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
//距离表头边框线左右4像素才触发效果
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//修改为你的鼠标图标路径
}
else {
th.css({ 'cursor': 'default' });
}
});

When the mouse is pressed, the vertical line is displayed, and its height and position CSS properties are set. At the same time, the TH object that currently wants to change the column width is recorded. Because a border line is shared by two THs, the previous one is always taken here. TH object.

$("th").bind("mousedown", function(event) {
var th = $(this);
//与mousemove函数中同样的判断
if (th.prevAll().length < 1 | th.nextAll().length < 1) {
return;
}
var pos = th.offset();
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });
//全局变量，代表当前是否处于调整列宽状态
lineMove = true;
//总是取前一个TH对象
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});

Next is the effect of the vertical line moving when the mouse moves, because it needs to have this effect when the mouse leaves the TH element. This effect is written in the mousemove function of the BODY element

$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});

The last is the final column width adjustment effect when the mouse bounces up. Here I added the same mouseup code to the BODY and TH elements. I originally thought that I only needed to add the mouseup function to BODY, but I didn't understand why the event was not triggered when the mouse was in TH, so I had to add code to the TH element. My level is limited, and I don’t know how to extract the completely repeated code below.

$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});

Okay, as long as you introduce the JS file containing the above code into the page that needs this effect, you can add this effect to the table on the page.

In addition, the above code has no effect when customizing the mouse icon in Firefox. The jquery used is 1.2.6

Effect file download

——————————————————————Update——————————————

Regarding the bug of selecting content when dragging, just add the next line of code to the $(document).ready function

$("body").bind("selectstart", function() { return !lineMove; });