socialforge/public/javascripts/resizeable_table.js

/**
 * Created by ttang on 2016/5/24.
 */
    $(document).ready(function(){
       resizeable_table = function(colS,colE,p1,p2){
           var headerTds = document.getElementById("homework_table").rows[0].cells;
           var mousedown = false;
           var resizeable = false;
           var targetTd;
           var screenXStart =0;
           var tdWidth = 0;
           var headerWidth = 0;
           var tblObj = document.getElementById("homework_table");
           var tblWidth = tblObj.offsetWidth;
           for(var i = colS;i<colE;i++){
               addListener(headerTds[i],"mousedown",onmousedown);
               addListener(headerTds[i],"mousemove",onmousemove);
           }

           function onmousedown(event){
               if (resizeable == true){
                   var evt =event||window.event;
                   mousedown = true;
                   screenXStart = evt.screenX;
                   tdWidth = targetTd.offsetWidth;
                   tdWidth2 = targetTd.nextElementSibling.offsetWidth;
                   totalWidth = tdWidth + tdWidth2;
               }
           }
           function onmousemove(event){
               var evt =event||window.event;
               var srcObj = getTarget(evt);
               var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键，解决了Firefox无offsetX属性的问题
               if (mousedown == true){
                   var width = (tdWidth + (evt.screenX - screenXStart)) - p1 + "px";//计算后的新的宽度
                   var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - p2 + "px";
                   console.log(width, width2, totalWidth);
                   if (parseInt(width)<0  || parseInt(width2)<58 || tdWidth > totalWidth || tdWidth2 > totalWidth){
                       tartgetTd = null;
                       resizeable = false;
                       mousedown = false;
                   }else{
                       targetTd.style.width = width;
                       targetTd.nextElementSibling.style.width = width2;
                       document.onmouseup = function(event){
                           tartgetTd = null;
                           resizeable = false;
                           mousedown = false;
                           document.body.style.cursor='default';
                       }
                   }
               }else{
                   var trObj = tblObj.rows[0];
                   if(srcObj.offsetWidth - offsetX <=4){//实际改变本单元格列宽
                       targetTd=srcObj;
                       resizeable = true;
                       srcObj.style.cursor='col-resize';//修改光标样式
                   }else{
                       resizeable = false;
                       srcObj.style.cursor='default';
                   }
               }
           }
           document.onmouseup = function(event){
               tartgetTd = null;
               resizeable = false;
               mousedown = false;
               document.body.style.cursor='default';
           }
           function getTarget(evt){
               return evt.target || evt.srcElement;
           }
           function addListener(element,type,listener,useCapture){
               element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
           }
       }
    });