div change width by drag
    

1.2 js代码

var eleLeft = $('#myDiv').offset().left;
        var isMouseDown = false;
        var borderLen = 4; //左右边框
        
        $('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;

            }
          },
      
          mousemove:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标位置-div距左-borderLen
            }
          },
          mouseup:function(e){
            isMouseDown = false;
          }
        });

1.3 结果

只能往左拖动使div宽度变小，往右拖动没有用！原因往右拖动鼠标mousemove事件无法被div捕获了。拖动时也很难停下来！所以得改进。

2.再次改进

$('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft + ele.width() + borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;
            }
          }
        });

        $('body').bind({
          mousemove:function(e){
            var ele = $('#myDiv');
            var rightPos = eleLeft + ele.width() + borderLen;
            $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen)+'px'); 
            }
          },
          mouseup:function(e){
            isMouseDown = false;
          }
        });

这次解决了上述问题，可以往右拖，并且随时可以停下来了。到这里就完成了吗？NO!

当我引入一个其他div，并且阻止mouseup事件冒泡情况怎么样呢？答案是，拖动到这个其它div上放开鼠标后无法停止下来！