Drag the JQuery table to adjust the column width of the effect of write yourself

Similar to the table drag table head effect in the desktop program, when the mouse over the table border line, the mouse will become a left and right drag shape, then drag the mouse, will appear in the table with the mouse moving a vertical bar, and finally let go of the mouse, the table column width will be adjusted. Recently, I have been relatively free, so I will try to realize it by myself.

First need the mouse icon file as shown in the picture, in their own hard disk search *. Cur, it is sure to find.

To be able to use this effect on all pages that require it without changing any HTML on the page, I put all the code into $(document).ready(function() {}); , and write to a separate JS file.

Simulate a vertical line with a 1 pixel wide DIV 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> ");
});

Next comes the mouse variation of moving the mouse over the table's vertical border. At first I considered adding a small block-level element to the header to trigger the mousemove and mouseout events, but for simplicity I chose to add the event for the entire header.

Handle mouse variants in TH's mousemove event:

$("th").bind("mousemove", function(event) {
var th = $(this);
//Do not add effects to the first and last columns
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
//It takes 4 pixels from the border line to trigger the effect
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//Change to your mouse icon path
}
else {
th.css({ 'cursor': 'default' });
}
});

When the mouse is pressed, display the vertical bar and set its height, position, CSS property, and record the TH object that is currently changing the column width, because a border line is Shared by two TH's, here always take the previous TH object.

$("th").bind("mousedown", function(event) {
var th = $(this);
//The same judgment as in the mousemove function
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":"" });
//Global variable that indicates whether or not the column width is currently being adjusted
lineMove = true;
//Always take the previous TH object
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});

Next is the effect of the vertical bar moving when the mouse moves, because it needs to be able to have this effect when the mouse leaves the TH element, which is written in the mousemove function of the BODY element

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

Finally, when the mouse is up, the final adjustment of the column width effect. Here I've added the same mouseup code to the BODY and TH elements. I thought I just needed to add a mouseup function to the BODY, but I couldn't figure out why the event didn't fire when the mouse was in the TH, so I had to add code to the TH element as well. The level is limited, and the following completely repetitive code does not know how to extract.

$("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);
});
}
});

Well, you can add the effect to the table on the page by simply introducing a JS file containing the above code into the page where the effect is needed.

In addition, the above code in firefox custom mouse icon code did not work, the use of jquery is 1.2.6

(link: http://xiazai.jb51.net/201409/yuanma/changeTh.rar)