Browser-compatible implementation best practices for changing column widths by dragging and dropping in table

In enterprise applications, the table is a very common way of presentation, when the column data is longer, a more natural, the experience is better handled by drag and drop to change the column width, this function in some of the weight of the JS component library is provided, the implementation principle is different, but one common point is to achieve more complex, So we can do this with a little code, a regular table structure? This article will provide a practical verification of the practice for developers to refer to the expansion of ideas.

General idea:

1.HTML structure:

In order to simplify the code, adopt the standard HTML structure, namely the TABLE-TR-TD mode, no other restrictions, in our actual application, the table is very complex, but the core technology has not changed;

2. Event:

The onmousedown, onmousemove, onmouseup three events are combined to deal with the events in the process of dragging the mouse elements;

3. Browser compatible:

The whole implementation, involving the event model, OFFSETX offset calculation, such as the existence of browser differences, this paper provides a refined processing, and tested;

4. Column width calculation:

The core algorithm for dragging to change the width of a column is to calculate the horizontal distance that the mouse has slid across the screen during the mouse movement, possibly a positive value that is negative, and then add the original width of the cell to calculate the new width;

5. Border to drag and change cursor style:

This is calculated by the offsetwidth and offsetx data of the elements, only the cursor is located in the area of the border line 4px in the range, you can drag, and change the cursor style;

The following is a code for developers to refer to:

<! doctype html public  "-//w4c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w4.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
          can see that HTML is very simple. 
 
<script language= "JavaScript" >var headertds = document.getelementbyid ("TBL"). Rows[0] .cells;var mousedown = false;var resizeable = false;var targettd;var  screenxstart =0;var tdwidth = 0;var headerwidth = 0;var tblobj =  document.getelementbyid ("TBL"); for (var i = 0;i 
The above code is very refined implementation of the drag and drop change the width of the function, tested, compatible with IE8 above, Firefox, Chrome and other mainstream browsers.
Browser-compatible implementation best practices for changing column widths by dragging and dropping in table