请教js大牛来帮帮小弟看看这个插件那里出问题了。

近日小弟看到flexgrid的拖拉效果，突然奇想，有没有办法把他的列宽度动态调整和固顶表头功能分离出来呢?现在我做到的效果是这样
以下代码请自行引入Jquery文件，否则看不到效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{font-size:13px;}
  #flexTable{margin:0 auto;width:800px;margin-top:20px;}
  #flexTable #headDiv{position: relative;border: 1px solid #ccc;border-bottom: 0px;overflow: hidden;}
  #flexTable #bodyDiv{height:300px;overflow:hidden;overflow:auto;border: 1px solid #ccc;border-top: 0px;background: #fff;}
  #flexTable table{ border-collapse:collapse;table-layout:fixed;}
  #headDiv th,#bodyDiv td{border:#CCC solid 1px;height:25px;overflow:hidden;text-overflow:ellipsis;
                          white-space:nowrap;word-break:keep-all;text-align:center;font-size:12px;}
  .dropDiv{position:absolute;}
  .dropDiv div{cursor:e-resize;border:1px solid #CCC;position:absolute;width:8px;background: none;float: left;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    (function ($) {
        //用正则表达式判断jQuery的版本
        if (/1\.(0|1|2)\.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
            alert('movedTh 需要 jQuery v1.2.6 以后版本支持! 你正使用的是 v' + $.fn.jquery);
            return;
        }        var me = null;
        var thNum = 0;
        var dropDiv = "<div class='dropDiv'></div>";
        var dropDivs = "";
        var isDrag = false;        $.fn.movedTh = function () {
            me = $(this);
            var dropDivOffset = $(me).offset();
            var mainDivW = $(this).width();
            var mainDivH = $(this).height();            //生成拖动DIV层
            var dropDiv = document.createElement("div");
            //设置拖动层的位置
            $(dropDiv).addClass("dropDiv").
                height(mainDivH).
                width(mainDivW - 19).
                css("top", dropDivOffset.top).
                css("left", dropDivOffset.left);            //设置表头宽度
            $("#headDiv table", me).width(mainDivW - 19);            //获取表头每个TH宽度并按照每个TH生成一个拖动DIV
            $("#headDiv th").each(function () {
                //设置每列拖动DIV的位置
                var pos = ($(this).width() + $(this).offset().left - 2) - dropDivOffset.left;                $("<div id='dropDiv" + thNum + "' onmousedown='$().dragStart(event,this);'></div>").
                    css("top", me.offsetTop).
                    css("left", pos).
                    height(mainDivH).
                    appendTo($(dropDiv));
                thNum++;
            });            $(me).append(dropDiv);
        } //endmovedTh        $.fn.dragStart = function (e, dragObj) {
            var doc = document;
            var dragData = dragObj;
            var dragEvent = window.event || e;
            var dragPiotX = dragEvent.clientX || dragEvent.pageX;
            var n = $('div', $(dragObj).parent()).index(dragObj);            dragData.mouseDownX = dragPiotX;
            dragData.thOldWidth = $('th:eq(' + n + ')', me).width();
            dragData.oldLeft = parseInt(dragObj.style.left);
            dragData.newWidth = 0;
            dragData.dragDivIndex = n;
            dragData.newLeft = 0;            //保持事件触发状态
            if (dragObj.setCapture) {
                dragObj.setCapture();
            } else if (window.captureEvents) {
                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            }            doc.onmousemove = function (e) {
                //var dragData = dragObj;
                var event = window.event || e;                if (!dragData.mouseDownX) return false;                var diff = (event.clientX || event.pageX) - dragData.mouseDownX;
                dragData.newLeft = dragData.oldLeft + diff;
                var nw = dragData.thOldWidth + diff;                if (nw > 0) {
                    $('.dropDiv div:eq(' + n + ')', me).css('left', dragData.newLeft);
                    dragData.newWidth = nw;
                    dragData.dragDivIndex = n;
                }
            } //endmove            doc.onmouseup = function (e) {
                var hDiv = $("#headDiv", me);
                var bDiv = $("#bodyDiv", me);
                var event = window.event || e;                if (dragData.mouseDownX) {
                    var n = dragObj.dragDivIndex;
                    var nw = dragData.newWidth;                    //设置表头宽度
                    $('th:eq(' + n + ')', hDiv).css('width', nw);                    //设置表体数据的每列宽度
                    $('tr', bDiv).each(function () {
                        $('td:eq(' + n + ')', this).css('width', nw);
                    });
                    $(hDiv).width(($(hDiv).width() * 1 + (event.clientX || event.pageX) * 1 - dragData.mouseDownX) - 17);
                    $(bDiv).width($(bDiv).width() * 1 + (event.clientX || event.pageX) * 1 - dragData.mouseDownX);                    //hDiv.scrollLeft = bDiv.scrollLeft;
                    dragData.mouseDownX = false;                    if (dragData.setCapture) {
                        dragData.releaseCapture();
                    } else if (window.captureEvents) {
                        window.releaseEvents(e.MOUSEMOVE | e.MOUSEUP);
                    }
                }
            } //endonmouseup
        } //enddargStart
    })(jQuery)
</script><script type="text/javascript">    $(document).ready(function () {
        $("#flexTable").movedTh();
    });
</script><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table</title>
</head>
<body>
        <div id="flexTable">
            <div id="headDiv">
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                      <th >改变table的列宽度改</th>
                      <th >改变table的列宽度改</th>
                      <th >改变table的列宽度改</th>
                      <th >改变table的列宽度改</th>
                      <th >改变table的列宽度改</th>
                      <th >改变table的列宽度改</th>
                  </tr>
                </table>
            </div>            <div id="bodyDiv">
                <table width="100%" cellpadding="0" cellspacing="0">
                     <script type="text/javascript">
                         for (var i = 0; i < 20; i++)
                             document.write("<tr><td >改变table的列宽度" +i+"</td><td >改变table的列宽度</td><td >改变table的列宽度</td><td >改变table的列宽度</td>" +
                     "<td >改变table的列宽度</td><td >改变table的列宽度</td></tr>\r\n");
                    </script>
                </table>
            </div>
        </div>
</body>
</html>现在有几个bug小弟js水平有限，请各位js大牛帮帮小弟我。
一个是拖拉后用于拖拉的div复位的问题（老是越拖越后，不知道那里出了问题）
一个是拖拉宽度超越主DIV（maindiv）后头部div和数据体div不是让主div出现滚动条，而已直接跳出了主div暂时问题是这样，希望有大牛做点修改，然后把这个插件一起分享出来。