div拖动实现及优化

　　工作中的一个项目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，文中不但有思路，而且有多种写法，还有优化以及一些使用场景的考虑，写的非常好。

转载于:https://www.cnblogs.com/nevermorewang/p/9327630.html