How to make a moving div restricted in an outside div?

Question

So I have a div you move with your arrow keys, but how do I make it so it can't go outside the "border div"?

$(document).ready(function(){
  $(document).keydown(function(e) {
      switch (e.which) {
      case 37: // Left
        $("#cube").css("left", $("#cube").offset().left - 101);
        break;
      case 38: // Up
        $("#cube").css("top", $("#cube").offset().top - 11);
        break;
      case 39: // Right
        $("#cube").css("left", $("#cube").offset().left - 97);
        break;
      case 40: // Down
        $("#cube").css("top", $("#cube").offset().top - 7);
        break;
      }
  });
});

http://jsfiddle.net/SfKHN/

Your code will be cleaner and will run faster if you use a global: var $cube = $("#cube"); — Steve Wellens, May 05 '13 at 01:41
@user2291675 I have added a solution to your issue take a look? — PSL, May 06 '13 at 18:45

score 2 · Answer 1 · answered May 05 '13 at 02:19

Here you go:- I tested in FF and Chrome and seems to be fine....

Demo

Probably this is not completely perfect but you can build on it. Key here is to get the margins of the parent right and make sure the cube's left/right/top/bottom doesn't go beyond it. Border width also should be considered. Another thing is your Step should be a multiple of its width/height(as it is a square)

$(document).ready(function(){
    $(document).keydown(function(e) {
        var cube = $("#cube");
        var leftMargin = 0;
        var rightMargin = $('#outside').position().left + $('#outside').width() - cube.width();
        var topMargin =0;
        var bottomMargin = $('#outside').position().top + $('#outside').height() - cube.height();
        switch (e.which) {
        case 37: // Left
                var newLeft = parseInt(cube.position().left - 50);
               if(leftMargin <= newLeft)
                {
                    cube.css("left", newLeft);
                }
            break;
        case 38: // Up
                var newTop = parseInt(cube.position().top - 50);
                if(topMargin <= newTop)
                {
                    cube.css("top",newTop);
                }
            break;
        case 39: // Right
                var newRight = (cube.position().left + 50);
                 if(rightMargin > newRight)
                {
                    cube.css("left", newRight);
                }
            break;
        case 40: // Down
                var newBottom = parseInt(cube.position().top + 50);
                if(bottomMargin > newBottom)
                {
                    cube.css("top", newBottom);
                }
            break;
        }
    });
});

tay10r · Answer 2 · 2013-05-05T02:11:23.733

You add simple if statements to make sure you haven't passed the border. Here's an example:

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

            case 38: // Up
                if( ( $("#cube").offset().top - 11 ) >= 0 )
                    $("#cube").css("top", $("#cube").offset().top - 11);
                break;

            case 40: // Down
                if( ( $( "#cube" ).offset( ).top - 7 ) < ( 400 - 50 ) )
                    $("#cube").css("top", $("#cube").offset().top - 7 );
                break;
        }
    });
});

You'd make similar changes to the left and right arrows

Ram · Answer 3 · 2013-05-05T02:41:48.500

$(document).ready(function () {
    var $out  = $('#outside'),
        w     = $out.width(),
        $cube = $('#cube'),
        cw    = $cube.outerWidth();

    $(document).up(function (e) {
        switch (e.which) {
            case 37:
                $cube.css('left', function (_, left) {
                    left = parseInt(left, 10);
                    if (left !== 0) return left - cw;
                });
                break;
            case 38:
                $cube.css('top', function (_, top) {
                    top = parseInt(top, 10);
                    if (top !== -1) return top - cw;
                });
                break;
            case 39:
                $cube.css('left', function (_, left) {
                    left = parseInt(left, 10);
                    if (left + cw < w) return left + cw;
                });
                break;
            case 40:
                $cube.css('top', function (_, top) {
                    top = parseInt(top, 10);
                    if (top !== 349) return top + cw;
                });
                break;
        }
    });
});

http://jsfiddle.net/QmBNC/

How to make a moving div restricted in an outside div?

3 Answers3