工作中的一个项目ui界面比较传统(chou)，就想着把前端重构一下。内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏，好处是边栏可伸缩，占用面积小。不完美的地方是有时候会遮挡页面上最右边的按钮，作为一个喜欢追求美的人，是可忍孰不可忍，于是决心改掉这个导航栏，让它可拖拽，如果挡住了就拖一下换个地方，岂不美哉 ？！
本例实际是只上下拖动，全局自由拖动的话将x坐标一起加入计算即可。
说干就干，想了下，觉得处理逻辑很清晰：
1、鼠标放到div上，图标变成可移动的，最好变成五个小指头乱抓的小手形；
2、mousedown的时候，触发事件，记录div当前位置，鼠标位置；
3、鼠标开始移动，mousemove触发事件，随时根据鼠标位置的移动距离修改div的位置；注意mousemove要区分鼠标左键是否按下。
4、到达目的地，mouseup，结束。
注意第三四两步，第三步的实现有两种方式：
1、鼠标按下，div绑定mousemove事件，鼠标mouseup的时候移除绑定。
2、鼠标按下，将全局变量move修改为true，mouseup的时候改为false，mousemove的时候判断move是否为true，true则进行拖动，否则不作任何动作。
个人认为第一种方式实现较好，第二种虽然为true直接过了，但仍进行了判断逻辑，相对来说有了多余操作，总是不好的。
第一版代码，aside边栏div的class：
$(".aside").mousedown(function(e){
$(this).find("li").css("cursor","move");
$(this).find("div").css("cursor","move");
ready2Move = true;
startValue = e.clientY -$(this).offset().top;
return false;
}).mouseup(function(e){
$(this).find("li").css("cursor","pointer");
$(this).find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(this).offset().top;
}).mouseout(function(e){ //这里是为了防止鼠标脱出后仍然控制div移动的情况
$(this).find("li").css("cursor","pointer");
$(this).find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(this).offset().top;
}).mousemove(function (e) {
if(ready2Move){//鼠标按下，并移动
var currentValue = e.clientY;
var distance = currentValue - startValue;
$(".aside").css("top",distance+"px");
}
return false;
});
return false是为了阻止事件冒泡，防止拖动的时候对外边的文本进行了“选中”操作；
该版本基本实现了拖动功能，但有个比较严重的问题是div移动的有些卡顿，鼠标拖快了容易跑出div，导致后续的拖动无效。
经查找资料后，比较一致的说法是事件冒泡导致的，mousemove要一层层冒泡，而且由于是持续触发导致页面渲染速度跟不上鼠标移动速度(这里理论上是即使每移动一个像素触发一次？实际观察发现更像是隔一段时间触发，这个触发的细节没查到相关资料)，也就产生了鼠标脱出div的情况。加上return false阻止冒泡，仍然无效，速度很慢。后来无意翻到大神的文章，http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html，发现大神的做法是将mousemove绑定到window对象上，避免了冒泡。赶紧来试一下：
$(".aside").mousedown(function(e){
$(this).find("li").css("cursor","move");
$(this).find("div").css("cursor","move");
ready2Move = true;
startValue = e.clientY -$(this).offset().top;
return false;
})
$(document).mouseup(function(e){
$(".aside").find("li").css("cursor","pointer");
$(".aside").find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(".aside").offset().top;
}).mousemove(function (e) {
if(ready2Move){//鼠标按下，并移动
var currentValue = e.clientY;
var distance = currentValue - startValue;
$(".aside").css("top",distance+"px");
}
return false;
});
修改过后，果然拖动效果如丝般顺滑。
说明：该部分代码是我本地版本，采用的都是全局变量判断是否需要移动的做法，可改为mouseup取消事件的方式，但页面效果差别甚微，暂未改动。更清晰的逻辑请查看http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html，文中不但有思路，而且有多种写法，还有优化以及一些使用场景的考虑，写的非常好。