Question

I’m doing this output and it’s already running like I wanted it to. This is like moving a div using arrows keys, but my problem is when I press arrows key to move, the color grey div surpasses its own parent div. What I want to achieve is that the grey div would not be able to step outside its parent div (that has a red border), even if I continually press arrow keys.

This is demo jsFiddle

Any help?

Answer 1

Change your code to

$(function(){
    var spaceship = $('<div id="spaceshipContainer"/>'); // store reference to actual jQuery object
    var cS = $('#centerSpace').append(spaceship);
    var limits = {width: cS.width()-spaceship.width() , height:cS.height()-spaceship.height()}; // pre-calculate the limits

    $(document).keypress(function(e){
        var position = $('#spaceshipContainer').position();


        switch(e.keyCode){

            case 37:
                position.left -= 10;
                break;
            case 38:
                position.top -= 10;
                break;
            case 39:
                position.left += 10;
                break;
            case 40:
                position.top += 10;
                break;
        }

        position.left = Math.max(Math.min(position.left, limits.width),0); // enforce horizontal limits
        position.top = Math.max(Math.min(position.top, limits.height),0); // enforce vertical limits

        spaceship.css({left:position.left, top:position.top});
    });
});

Also add position:relative to the #centerSpace

Demo at http://jsfiddle.net/4bpgp/17/