Jquery table dragging to adjust column width

Similar to desktopProgramThe effect of dragging the table header. When you move the cursor over the header border, the mouse changes to the shape of dragging left and right, and then dragging the mouse, a vertical line is displayed in the table that moves with the mouse. When you open the mouse, the column width of the table is adjusted. I am idle recently, so I will try to implement it myself. Here I will share my little achievements.

First, search for *. cur in your hard disk.

In order to be able to use this effect on all pages without modifying any HTML on the pageCodeIntegrate in $ (document). Ready (function () {}); and write an independent JS file.

Use a div with a width of 1 pixel to simulate a vertical line. After loading the page, add it to the body element.

 
$ (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. At first, I considered adding a small block-level element to the table header to trigger the mousemove and mouseout events. But for simplicity, I still choose to add this event for the entire header.

Handle mouse variations in the th mousemove event:

 

$ ("Th "). BIND ("mousemove", function (event) {var th = $ (this); // do not add effect if (Th. prevall (). length <= 1 | th. nextall (). length <1) {return;} var left = th. offset (). left; // The effect is triggered if (event. clientx-left <4 | (Th. width ()-(event. clientx-left) <4) {th.css ({'cursor ':'/web/page/frameset/images/splith. cur'}); // modify your Mouse icon path} else {th.css ({'cursor ': 'default '});}});
 

When you press the mouse, a vertical line is displayed, its height and position are set to CSS attributes, and the th object to change the column width is recorded at the same time, because a border line is shared by two th, the first th object is always used here.

$ ("Th "). BIND ("mousedown", function (event) {var th = $ (this); // same judgment as 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, indicating whether the current linemove is in the adjusted column width state = true; // always take the previous th object if (event. clientx-pos. left <th. width ()/2) {currth = th. prev () ;}else {currth = th ;}}});
 

The next step is the effect of moving the vertical line when the mouse moves, because you need 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 step is to adjust the column width when the mouse is up. Here I have added the same mouseup code to the body and th elements. I thought I only needed to add the mouseup function to the 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. The level is limited. The following completely repeated code does not know how to extract it.

$ ("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, you just need to introduce the JS file containing the above Code in the page that requires this effect, you can add this effect to the table on the page.

In addition, the Code for customizing the Mouse icon in Firefox does not work. The jquery used is 1.2.6.

 

Effect File Download:Http://files.cnblogs.com/xxfss2/changeTh.js

 

------------------------ 2012-8-16 update --------------

Add the following code to the $ (document). Ready function for the bug that will be selected during dragging.

$ ("Body"). BIND ("selectstart", function () {return! Linemove ;});