添加限制以使用箭头键移动 div答案

【问题标题】：Adding a limit to moving a div with arrow keys添加限制以使用箭头键移动 div
【发布时间】：2012-08-15 13:23:22
【问题描述】：

您好，我已经添加了功能（在 * 上找到），一旦用户按住其中一个箭头键，我的 div 就会向左或向右移动。一切正常。

我想知道，一旦 div 到达“终点”或移动了一定数量的像素，是否有办法阻止 div 移动。

我的代码如下

$(document).keydown(function(e) {
switch (e.which) {
case 37:
    $('#block').stop().animate({
        left: '-=50'
    }); //left arrow key
    break;

case 39:
    $('#block').stop().animate({
        left: '+=50'
    }); //right arrow key
    break;

}
})

【问题讨论】：

标签： javascript

【解决方案1】：

当然，看看这个小提琴：http://jsfiddle.net/ArtBIT/V7qcK/

var KEY = {
    LEFT: 37,
    RIGHT: 39
}
var boundaries = {
    left: 0,
    right: 200
}
$(document).keydown(function(e) {
    var position = $('#block').position();

    switch (e.which) {
    case KEY.LEFT:

        $('#block').stop().animate({
            left: Math.max(boundaries.left, position.left - 50)
        }); 
        break;

    case KEY.RIGHT:
        $('#block').stop().animate({
            left: Math.min(boundaries.right, position.left + 50)
        });
        break;
    }
});

或者这个http://jsfiddle.net/ArtBIT/8PWCR/1/ 用于二维运动

【讨论】：

【解决方案2】：

获取当前的offset，然后处理：

var max = 1000;

$(document).keydown(function(e) {
    switch (e.which) {

        case 37:
            if($('#block').offset().left > 50)
            {
                $('#block').stop().animate({ left: '-=50' });
            }
            break;

        case 39:
            if($('#block').offset().left < (max - 50)
            {
                $('#block').stop().animate({ left: '+=50' });
            }
            break;

    }
});

【讨论】：