用jQuery做拖放和键盘位移

用jQuery做一个用鼠标和键盘控制div移动的特效

这个特效就是页面中有一个div方块，用鼠标拖动改变它的位置，同时也可以用键盘的上下左右键控制它的走向，这个特效在游戏中用的挺多的。这个特效我分为俩部分来实现：分别是鼠标拖动和键盘控制。
鼠标拖动

1. 先设置一个div方块，设置它的宽、高、背景颜色，然后将它的位置设置为绝对定位（position：absolute）。
2. 在鼠标落在div上时，计算出鼠标和div的起始距离。
3. 在移动鼠标的时候，给div设置css样式，改变它的left和top值，用鼠标现在的位置减去它们之间的起始距离就是div的位置。
4. 在抬起鼠标的时候清除绑定事件。
   具体代码

 <script src="jquery.min.js"></script>
 <script>
    // 鼠标移动div方块跟着移动
    $("div").mousedown(function(ev){
        // 获取到鼠标和div元素的起始距离
        // 用鼠标相对于页面的距离减去div相对于页面的距离
        var disX = ev.pageX - $(this).offset().left ;
        var disY = ev.pageY - $(this).offset().top;
        $(document).mousemove(function(ev){
            // 给页面添加鼠标移动事件而不给div元素添加，是为了防止鼠标移动速度过快离开div方块
        $("div").css({
            // 鼠标移动的时候改变div元素的位置
            "left": ev.pageX - disX + "px",
            "top" : ev.pageY - disY + "px"
            })
        })
        $(document).mouseup(function(){
            $(document).off("mousemove mouseup");
            // 给页面解除事件绑定
        })
        ev.preventDefault();
        // 阻止浏览器的默认行为
    })

键盘控制

1. 给上下左右键设置一个开关，并将起始值设为false；
2. 当按下键盘的时候，将它的开关设置为true，抬起键盘的时候将它的开关设置为false；
3. 添加计时器，当开关为真时，改变div的left/top
   具体代码

var oL = false, oT = false, oR = false, oB = false;
    // 给上下左右键添加开关
    $(document).on({
         // 当键盘按下的时候，将开关的值设置为true
        "keydown" : function(ev){
            switch(ev.which){
                case 37 : oL = true ; break;
                case 38 : oT = true ; break;
                case 39 : oR = true ; break;
                case 40 : oB = true ; break;
            }
        },
         // 当键盘抬起的时候，将开关的值设置为false
        "keyup" : function(ev){
            switch(ev.which){
                case 37 : oL = false ; break;
                case 38 : oT = false ; break;
                case 39 : oR = false ; break;
                case 40 : oB = false ; break;
            }
        }
    })
    // 添加计时器，当开关为真时，改变div的left/top
    setInterval(function(){
        oL && $("div").css("left",$("div").offset().left - 10 + "px");
        oT && $("div").css("top",$("div").offset().top - 10 + "px");
        oR && $("div").css("left",$("div").offset().left + 10 + "px");
        oB && $("div").css("top",$("div").offset().top + 10 + "px");
    },30)

效果展示
emmm截图只能看到有个方块，我就不做GIF动图了，有兴趣可以去试验一下。