Dragging a div should resize the other two divs

I have three div's left,right and seperator and on dragging div seperator should resize the left and right div's .

The html code is as follows

<div id="left">Left</div>
        <div id="seperator">&nbsp;</div>
<div id="right"> Right</div>

The seperator div is made draggable using following javascript

var dragObject  = null;
    var mouseOffset = null;
    // document.onmousemove = mouseMove;
   //document.onmouseup    = mouseUp;


        var div_id = document.getElementById('seperator');
        makeDraggable(div_id);


    function getMouseOffset(target, ev){
        ev = ev || window.event;

    开发者_JS百科    var docPos    = getPosition(target);
        var mousePos  = mouseCoords(ev);
        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
    }

    function getPosition(e){
        var left = 0;
        var top  = 0;

        while (e.offsetParent){
            left += e.offsetLeft;
            top  += e.offsetTop;
            e     = e.offsetParent;
        }

        left += e.offsetLeft;
        top  += e.offsetTop;

        return {x:left, y:top};
    }

    function mouseMove(ev){           
        ev           = ev || window.event;
       // var mousePos = mouseCoords(ev);
        // mouseOffset = getMouseOffset(this, ev);
        if(dragObject){
            var div_left = document.getElementById('left');
            var div_right = document.getElementById('right');
            dragObject.style.position = 'relative';
            div_left.style.position = 'relative';
            div_left.style.width = ( (div_left.offsetWidth) -( mouseOffset.x) )+"px";
            div_right.style.position = 'relative';
            div_right.style.width =  ((div_right.offsetWidth) + (mouseOffset.x)) + "px";

            return false;
        }
    }

    function mouseUp(){
        dragObject = null;
    }

    function makeDraggable(item){
        if(!item) return;
        item.onmousedown = function(ev){
            dragObject  = this;
            mouseOffset = getMouseOffset(this, ev);
            var div_id = document.getElementById('seperator');
            div_id.addEventListener('mousemove', mouseMove,true);
            div_id.addEventListener('mouseup', mouseUp,true);
            return false;
        }
    }

    function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }

The code for resizing is done in the function mouseMove()

The code is explained as it on the following link

the link explains the dragging of div

so,I want to resize the left and right div's using div seperator