鼠标拖动改变div容器的大小

html代码如下：

<div class="fu">
      <div class="zi1">1111</div>
      <div class="zi2" style="cursor:col-risize;" unselectable="on" user-select: none;>2222</div>
      <div class="zi3">3333</div>
</div>

css代码如下：

<style>
      .fu{
        width: 100%;
        position: relative;
        height: 500px;
      }
      .zi1{
        position: absolute;
        left: 0;
        background: green;
        width: 100%;
        z-index: 5;
        height: 100%;
      }
      .zi2{
        position: absolute;
        left: 100px;
        background: red;
        width: 5px;
        z-index: 7;
        height: 100%;
      }
      .zi3{
        position: absolute;
        left: 105px;
        background: orange;
        width: 100%;
        z-index: 10;
        height: 100%;
      }
    </style>

js代码如下：

<script>
      var shifou=false                                                      //设定一个变量用来改变true/false的状态
      function tuozhuai(){
            $(document).mousemove(function(e){
                if (shifou) {
                var zix=e.pageX;        //获取鼠标移动事件的X坐标
                var zix1=zix+5
                var zi3width=$('.fu').width()        //获取父容器的宽度
                var zi3movewidth=zi3width-zix     //获取鼠标移动后子容器的宽度
                $('.zi2').css('left',zix)                  //设置子容器的left值
                $('.zi3').css('left',zix1)                //设置子容器的left值
                $('.zi3').width(zi3movewidth)      //设置子容器的宽度
                }
            })       
      }
      $('.zi2').mousedown(function(){            //鼠标mousedown时调用上面的函数
        shifou=true;
        tuozhuai()
      })
      $('.zi2').mouseup(function(){                //鼠标mouseup时改变shifou的值
        shifou=false;
      })
    </script>