用鼠标拖动改变tabletable边框大小,如何实现

设计思路：
1、在table的右下角放一张图片，图片有onmousedown事件
2、在脚本里面放两个变量，初始化为0，当鼠标按下时,设置此两个变量为当前鼠标的坐标
3、在body的onmousemove事件添加脚本,为判断前面两个变量是否为0，当不为0是就表示可以改变大小，计算当前鼠标的位置和之前的变量之间的差额，把次差额加到table上，就可以改变大小了
4、在body的onmouseup事件添加脚本，把两个变量设为0脚本
var setX = 0;
var setY = 0;
function setDown( e )
{
    setX = event.x;
    setY = event.y;
}
function setUp()
{
    setX = setY = 0;
}
function setMove( e )
{
    if( setX != 0 && setY != 0 )
    {
        var x = new String(mytable.style.width);
        var moveX = parseInt( x.substring( 0, x.length - 2 ), 10 );
        var y = new String( mytable.style.height );
        var moveY = parseInt( y.substring( 0, y.length - 2 ), 10 );
        moveX = moveX + ( event.x - setX );
        moveY = moveY + ( event.y - setY );
        mytable.style.width = moveX + "px";
        mytable.style.height = moveY + "px";
    }
}页面
<body onmousemove="setMove(event);" onmouseup="setUp();"><table id="mytable">
<tr>
    <td>
    </td>
</tr>
<tr style="">
    <td>
        <img src="..." onmousedown="setDown(event);">
    </td>
</tr>
</table>