jquery Drag the header border line to resize the table column width effect code _jquery

Like a table in a desktop program dragging a table header, when the mouse hovers over the header border line, the mouse becomes the shape that represents drag left and right, and then dragging the mouse, a vertical bar appears in the table and the mouse is finally released, and the table column width is adjusted. Recently more free, then try to achieve their own, here to share the small results.

First need as shown in the picture of the mouse icon file, in their own hard drive search *.cur, you can certainly find.

In order to be able to use all pages that require this effect, and do not need to change any HTML on the page, I integrate all the code into $ (document). Ready (function () {}); , and write a standalone JS file.

Simulates a vertical bar with a 1-pixel-wide Div, added to the BODY element after the page is loaded

$ (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 to move the mouse over the vertical border of the table to the mouse variant, 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 table header.

Handle the mouse variant in the MouseMove event of th:

$ ("th"). Bind ("MouseMove", function (event) {
var th = $ (this);
Do not add an effect to the first column and last column
if (Th.prevall (). length <= 1 | | th.nextall (). length < 1) {return
;
}
var left = Th.offset (). Left;
4 pixels from the top border of the table to trigger the effect
if (Event.clientx-left < 4 | | (Th.width ()-(Event.clientx-left)) < 4) {
th.css ({' cursor ': '/web/page/frameset/images/splith.cur '});
Modify for your mouse icon path
}
else {
th.css ({' cursor ': ' Default '});
}
};

When the mouse is pressed, the vertical bar is displayed, the height is set, the CSS property is positioned, and the th object that is currently changing the width of the column is recorded, because a border line is shared by two th, where the previous th object is always taken.

$ ("th"). Bind ("MouseDown", function (event) {
var th = $ (this);
The same judgement as the MouseMove function (
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 represents whether the current column is in the
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 mouse movement, the vertical bar with the effect of moving, because you need to leave the th element when the mouse can also have the effect, the effect is written in the BODY element of the MouseMove function

$ ("body"). Bind ("MouseMove", function (event) {
if (Linemove = = True) {
$ ("#line"). CSS ({"Left": Event.clientx ). Show ();
}
};

Finally, when the mouse is bouncing, the final adjustment column width effect. Here I add the same MouseUp code to the body and th two elements. I thought I just need to add the MouseUp function to the body, but I do not understand why the mouse in the th, the event did not trigger, I had to give the th element also added code. The level is limited, the following completely duplicated code does not know how to draw out.

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

All right, as long as you introduce a JS file containing the above code in a page that requires this effect, you can add the effect to the table in the page.

In addition to the above code in the Firefox custom mouse icon code does not work, the use of jquery for 1.2.6

Effect File Download

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

For a bug where the content is selected when you drag, add the following line of code to $ (document). The Ready function is fine.

$ (' body '). Bind ("Selectstart", function () {return!linemove;});