对于一个非常规的需求都是一次新的挑战，那怕是一个经验丰富的老前端。

需求背景：

在一个父DIV层里，充许用户拖动DIV子层修改其宽高，并限制其不能溢出父DIV层。

简短的需求，第一眼，你会觉得是一个小的功能开发，容易。但在不知道其构造原理下，只会撞的满头包。这次开发涉及鼠标三件事件的应用：mousedown、mousemove和mouseup，由它们组成一个动作操作闭环。

CSS样式：

CSSbody { background: #F5F5F5; }
body,div,p { margin: 0; padding: 0; }
.wrap { position: relative; width: 600px; height: 380px; margin: 20% auto; background: #FFF; }

.drop-item { position: absolute; left: 200px; top: 150px; text-align: center;color: #515659;font-size: 14px; width: 180px; line-height: 40px; border: 1px dashed #4680ff; z-index: 1;}
.drop-item {  -webkit-user-select: none; user-select: none;  }
.drop-item div { position: relative; }
.drop-item div p { display: block; height: 40px; overflow: hidden;}
.drop-item div span { position: absolute; bottom: -6px; right: -6px; display: block; width: 12px; height: 12px; border: solid 1px #ccc; border-radius: 100%; background: #FFF; z-index: 4; cursor: w-resize; }

HTML代码：

HTML<div class="wrap">
    <div class="drop-item">
        <div>
            <p>鼠标拖动右下角,改变宽度</p>
            <span class="resize-btn"></span>
        </div>
    </div>
</div>

渲染时，子DIV层悬浮在父DIV层之上，DIV右下角模似resize的效果，用户拖动 resize 按钮，实时修改。

监听 resize 按钮鼠标事件：

JSvar drop = { status: false}; //全局变量

$('.resize-btn').mousedown(function(event) {
    event.stopPropagation();
    drop.status = true;
    drop.screenX = event.screenX;
    drop.width = $(this).parent().width();
    drop.positionX = $(this).parent().parent().position().left;
    drop.container = $(this).parent().parent();
    drop.containerW = $(this).parent().parent().parent().width();
});

触发动作之前，记录鼠标点击按钮初次坐标数据，同时声明动作已开始。

监听document鼠标移动事件:

JS$(document).mousemove(function(event){ //鼠标移动事件
    if(!drop.status) { //控制动作是否进行中
        return false;
    }

    var width = drop.width;
    var positionX = drop.positionX;
    var container = drop.container;
    var containerW = drop.containerW;

    if(event.screenX > drop.screenX) {
        width = width + event.screenX - drop.screenX;
    } else {
        width = width - (drop.screenX - event.screenX);
    }

    if(positionX + width > containerW) { //限制DIV的宽
        width = containerW - positionX;
    }

    if (width < 60) { //设置DIV最小宽度
        width = 60;
    }

    container.css('width',width);
}); 

鼠标按着并拖动鼠标移动时，监听的对象由按钮转变成document。通过当前坐标数据与第一次坐标数据进行计算，实时修改DIV的大小。

※ 鼠标移动时，容易超出按钮面积范围，mousemove事件监听失败，换成document全局监听。

监听document鼠标松开事件:

JS$(document).mouseup(function(event){ //鼠标松开事件
    drop.status = false;
}) 

当松开鼠标按钮时，动作行为结束，重新将drop.status设置false状态，鼠标移动事件自动中止执行计算，形成一个完整的动作闭环事件。

※ 样例中没有设置DIV高的计算，不是漏了，只是需求上没有，个别有需求的请自我完善。