可拖动的窗口（只是JS部分的工作原理）

可拖动的窗口（只是JS部分的工作原理）

/*      窗口拖动
原理：在鼠标按住左键时，改变可拖动窗体相对于上级窗体的绝对定位位置，从而实现窗体随鼠标移动的现象
关键：获取鼠标移动的量来改变窗体的移动量。
    1、鼠标与窗体的相对距离；2、鼠标移动后的新位置再加相对距离即窗体的新位置
事件顺序：
    1、页面加载后即要绑定鼠标进入事件。当鼠标进入时再动态绑定按下、移出事件
    2、当按下左键时再动态绑定抬起、移动事件
    3、当鼠标快速移动致窗体移动跟不上移动时，鼠标会移出窗体致其它动态绑定的事件没有取消，故 在进入时要取消所有事件（除进入事件外）
注意：
    1、可拖动窗体必须绝对定位。
    2、要设定一个区域让左键点击并拖动
    3、事件的触发顺序及各自的功能设置
    4、鼠标与窗体的相对位置，鼠标当前的位置的计算逻辑。


$('#sbxx_drag')     可拖动窗口中的标题，点住此对象可以拖动整个窗口
$('#sbxx')          可拖动窗口的外框，将所有拖动时显示的内容全部放在里面，实现此移动则整体移动。外框是绝对定位，此时相对于浏览器窗体左上点的偏移量，带有单位px
e.pageX             鼠标当前相对浏览器窗口左上点的偏移量
parseInt($('#sbxx').css("left")         将带有单位的一个字符串值转成数值。
    鼠标相对于窗体左上角的位置 - 可拖动窗体相对于窗体左上角的位置 ＝ 鼠标相对于可拖动窗体的位置。在拖动鼠标时窗体移动，这个相对值不应该改变！  
var lsx=e.pageX-pointX;     鼠标发生移动时，移动后的位置 - 与可拖动窗体的相对位置 ＝ 可拖动窗体当前的位置

*/
$('#sbxx_drag').on('mouseover',function(){
    $(this).off('mouseup mousedown mousemove');//鼠标进入可拖动处时取消 抬起 按下 移动 事件，防止异常情况
    $(this).css('cursor','default');//鼠标进入时的默认样式
    $(this).on('mousedown',function(e){     //鼠标进入时动态绑定鼠标按下事件
        if(e.which==1){     //判断鼠标按下的是不是左键
            $(this).css('cursor','move');//改变按下时的鼠标样式
            var pointX=e.pageX-parseInt($('#sbxx').css("left")); //记录鼠标按下时，鼠标位置与可移动外框的位置差
            var pointY=e.pageY-parseInt($('#sbxx').css("top")); 
            $(this).off('mouseup').on('mouseup',function(){     //动态绑定鼠标抬起事件
                $(this).css('cursor','default');
                $(this).off('mousemove');
            });
            $(this).off('mousemove').on('mousemove',function(e){    //动态绑定鼠标移动事件
                var lsx=e.pageX-pointX; 
                var lsy=e.pageY-pointY; 
                $('#sbxx').css({top:lsy,left:lsx,});
            });	
        }
    });

});