js完成的拖拽在FF浏览器不能实现，望高手用jquery实现！

htm的代码如下：望高手帮忙修改使其兼容FF浏览器<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
/**
* 初始化
*/
move = null; //移动标记
wmin = 10; //最小的窗口为100x100
zmax = 800; //记录当前的最高层
ssize = 4; //阴影宽度//var drag_flag = false; 
/**
* 父窗口内按下鼠标时，得到相关的值
*/
function Down(obj)
{
move = 1;
obj.x = event.x; //鼠标起始位置
obj.y = event.y;
obj.l = obj.offsetParent.offsetLeft; //父元素当前位置
obj.t = obj.offsetParent.offsetTop;
obj.w = obj.offsetParent.offsetWidth;
obj.h = obj.offsetParent.offsetHeight;
obj.ml = mdiv.offsetLeft; //最大的层
obj.mt = mdiv.offsetTop;
obj.mw = mdiv.offsetWidth;
obj.mh = mdiv.offsetHeight;
obj.setCapture(); //得到鼠标
}
/**
* 状态栏改变窗口大小
*/
function Resize(obj)
{
if(move != null)
{
obj.offsetParent.rows[obj.rowIndex - 1].style.pixelHeight += event.y-obj.y;
//obj.offsetParent.rows[obj.rowIndex + 1].style.pixelHeight -= event.y-obj.y;
//obj.offsetParent.rows[obj.rowIndex].style.pixelHeight=0;
obj.y=event.y;}}/**
* 放开鼠标时，清理不用的东西
*/
function Up(obj)
{
move = null;
obj.releaseCapture(); //释放鼠标
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div  id='mdiv'>
        <table border="1" style="height:100%; width:100%;table-layout:fixed;">
            <tr style="height:60px;" >
                <td valign="top">
                111111111
                11111111
                </td>
            </tr>
            <tr style=" height:2px; background-color:red;" onmousedown="Down(this)" onmousemove="Resize(this)" onmouseup="Up(this)" unselectable="on">
                <td style=" height:1px;">
               
                </td>
            </tr>
            <tr>
                <td valign="top">
                11111111111111111111111
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   


    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
        <title>无标题页 </title> 
        <script type="text/javascript">
            /** 
            * 初始化 
            */
            move = null; //移动标记 
            wmin = 10; //最小的窗口为100x100 
            zmax = 800; //记录当前的最高层 
            ssize = 4; //阴影宽度         //var drag_flag = false; 
            /** 
            * 父窗口内按下鼠标时，得到相关的值 
            */
            function Down(e, obj) {
                e = e || window.event;
                move = 1;
                obj.x = e.clientX; //鼠标起始位置 
                obj.y = e.clientY;
                obj.l = obj.offsetParent.offsetLeft; //父元素当前位置 
                obj.t = obj.offsetParent.offsetTop;
                obj.w = obj.offsetParent.offsetWidth;
                obj.h = obj.offsetParent.offsetHeight;
                obj.ml = mdiv.offsetLeft; //最大的层 
                obj.mt = mdiv.offsetTop;
                obj.mw = mdiv.offsetWidth;
                obj.mh = mdiv.offsetHeight;
                if(obj.setCapture) obj.setCapture(); //得到鼠标 
            }
            /** 
            * 状态栏改变窗口大小 
            */
            function Resize(e, obj) {
                if (move != null) {
                    e = e || window.event;
                    var height = parseInt(obj.offsetParent.rows[obj.rowIndex - 1].style.height);
                    obj.offsetParent.rows[obj.rowIndex - 1].style.height = (height + e.clientY - obj.y) + 'px';
                    //obj.offsetParent.rows[obj.rowIndex + 1].style.pixelHeight -= event.y-obj.y; 
                    //obj.offsetParent.rows[obj.rowIndex].style.pixelHeight=0; 
                    obj.y = e.clientY;            }        }        /** 
            * 放开鼠标时，清理不用的东西 
            */
            function Up(obj) {
                move = null;
                if(obj.releaseCapture) obj.releaseCapture(); //释放鼠标 
            } 
    </script> 
    </head> 
    <body onmousemove="Resize(event, document.getElementById('tr1'))"> 
        <form id="form1" runat="server"> 
        <div  id='mdiv'> 
            <table border="1" cellpadding="0" cellspacing="0" style="height:100%; width:100%;table-layout:fixed;"> 
                <tr style="height:60px;" > 
                    <td valign="top"> 
                    111111111 
                    11111111 
                    </td> 
                </tr> 
                <tr id="tr1" onmousedown="Down(event, this)" onmouseup="Up(this)" unselectable="on"> 
                    <td style=" height:4px;background-color:red;">
                    </td> 
                </tr> 
                <tr> 
                    <td valign="top"> 
                    11111111111111111111111 
                    </td> 
                </tr> 
            </table> 
        </div> 
        </form> 
    </body> 
    </html>
      

  2.   

    建议看看JQUERY UI的DEMO 其中已经有类似的实现拖动等效果