window.onload = function () {
    var rightId = document.getElementById("right1"); //获取右边界id
    var mainId = document.getElementById("main"); //获取整个区域的id
    var ifKeyDown = false;
    //鼠标按下事件
    rightId.onmousedown = function(){
        ifKeyDown = true;
    }
    rightId.onmouseup = function(){
        ifKeyDown = false;
    }
//鼠标点击右坐标点后 不松开情况下跟随鼠标移动 故使用window事件
    window.onmousemove = function (e) {
        if (ifKeyDown == true){
            var x = e.clientX; //鼠标x坐标
            var addWidth = "";   //鼠标增加的宽度
            var widthBefore = mainId.offsetWidth - 2;   //选取框变化前的id
            addWidth = x - widthBefore - getPosition(mainId).left;
            mainId.style.width = addWidth + widthBefore + "px";      //选取框变化后的宽度
        }
    }
}


//获取元素相对于屏幕左边的距离，使用offsetLeft
function getPosition(node){
    var left = node.offsetLeft;
    var top = node.offsetTop;
    var parent = node.offsetParent;
    while (parent != null){
        left += parent.offsetLeft;
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return {"left":left,"top":top};
}