鼠标拖拉div宽度

先看效果

先进入页面

当鼠标停留在中间div时，鼠标变成双箭头

点击拖拉

往右边拉

往最左边拉

代码

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <!--<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>-->
     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
     <title>
         RunJS 演示代码
     </title>
     <style>
         /*设置所有的厚度和元素间为0*/
         * {
             margin: 0;
             padding: 0;
         }

         /*设置页面背景颜色*/
         body {
             background-color: #af4040;
         }

         /*设置所有div绝对定位且左浮动，高度为500px*/
         div {
             position: absolute;
             float: left;
             height: 500px;
         }

         /*设置左边div背景颜色、宽度为200px、左边距离窗口为0*/
         div.left {
             background-color: #B2B2B2;
             width: 200px;
             left: 0px;
         }

         /*设置右边div背景颜色、宽度200px、右边距离窗口为205px、右浮动*/
         div.right {
             background-color: #00B83F;
             width: 200px;
             right: 205px;
             float: right;
         }

         /*设置中间div宽度5px、鼠标为左右两个箭头、背景颜色、元素的堆叠顺序为[后来者居上的准则]、左边距离窗口200px*/
         div.center {
             width: 5px;
             cursor: col-resize;
             background-color: #FFB951;
             z-index: 1;
             left: 200px;
         }
     </style>
     <script>
         $(function () {
             // 分别是：当前窗口、左边div、中间div、右边div
             var doc = $(document), dl = $("div.left"), dc = $("div.center"), dr = $("div.right");
             // 三个div宽度的总和
             var sum = dl.width() + dr.width() + dc.width();
             // 中间div拖动鼠标事件
             dc.mousedown(function (e) {
                 // 把当前中间div的dom对象转为jquery对象
                 // var me = $(this);
                 // e.clientX当前鼠标的x轴长度，me.css("left")中间div距离左边长度，me.prop("clientLeft")中间div距离左边div长度
                 var deltaX = e.clientX - (parseFloat(dc.css("left")) || parseFloat(dc.prop("border-left")));
                 // deltaX表示记录鼠标点击时，距离中间div左边的距离，取值范围不会超过中间div的宽度
                 // 鼠标移动事件
                 doc.mousemove(function (e) {
                     // lt表示鼠标移动时，中间div左边距离左边窗口的长度
                     var lt = e.clientX - deltaX;
                     // 这里表示，当中间div左边距离左边窗口的长度小于等于0时就等于0，就是保证不小于0
                     lt = lt < 0 ? 0 : lt;
                     // 这里表示，当中间div左边距离左边窗口的长度大于左边div加中间div长度时就等于左边div加中间div长度，就是保证不大于左边div加中间div的长度
                     lt = lt > sum - dc.width() ? sum - dc.width() : lt;
                     // 设置中间div左边的宽度，也就是等于当前鼠标的x轴
                     dc.css("left", lt + "px");
                     // 设置左边div的宽度
                     dl.width(lt);
                     // 设置右边div的宽度
                     dr.width(sum - lt - dc.width());
                 });
             });

             // 鼠标松开后删除鼠标移动事件
             doc.mouseup(function () {
                 doc.unbind("mousemove");
             });

             // 当鼠标点击移动开始不选中div里的内容
             doc[0].onselectstart = function () {
                 return false;
             };
         });
     </script>
 </head>
 <body>
 <div class="left">
     这是左边的div
 </div>
 <div class="center">
     这是中间的div
 </div>
 <div class="right">
     这是右边的div
 </div>
 </body>
 </html>