How can I limit div movement?

JavaScript
1

Here is my code

I want the “move” div will not be able to move outside “frame” div

Can it be done with Jquery? how?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#left").click(function(){
    $("#move").animate({right: '+=100px'});
  });

   $("#right").click(function(){
    $("#move").animate({right: '-=100px'});
  });

   $("#up").click(function(){
    $("#move").animate({bottom: '+=100px'});
  });

   $("#down").click(function(){
    $("#move").animate({bottom: '-=100px'});
  });
});
</script> 
<style type="text/css">
  #frame{
    height:500px;
	width:500px;
	position:absolute;
	border: 2px solid orange;"
  }
  
  #move{
    background:#98bf21;
	height:100px;
	width:100px;
	position:absolute;
	
  }
</style>
</head>
<body>

<button id="left"><</button><button id="right">></button><button id="up">^</button><button id="down">V</button>



<div id="frame">
	<div id="move"></div>
</div>

</body>
</html>
2

Hi there erezvol,

I don’t do “jQuery” but this will work OK…

<script> 
$(document).ready(function(){  

   var el = document.getElementById("move");
   
  $("#left").click(function(){
       if ( el.offsetLeft > 0 ) {
    $("#move").animate({right: '+=100px'});
      }
  });

   $("#right").click(function(){
       if ( el.offsetLeft < 400 ) {
    $("#move").animate({right: '-=100px'});
      }
  });

   $("#up").click(function(){
       if ( el.offsetTop > 0 ) {
    $("#move").animate({bottom: '+=100px'});
      }
  });

   $("#down").click(function(){
       if ( el.offsetTop < 400 ) {
    $("#move").animate({bottom: '-=100px'});
      }
  });
});
</script>

…unless you click the button during an animation.

coothead

1 Like
3

Well you might first stop() the currently running animation, or set the queue option to false (which I think would be equivalent here). Another possibility would be to disable the buttons when the animation starts, and enable them again in the complete callback.

BTW I’d also suggest not to hard-code the container dimensions as magic numbers, but use its offsetWidth and offsetHeight instead… here’s another solution that corrects the movement delta rather than preventing the animation altogether, so that it also works for container dimensions that are not a multiple of the moving element’s dimensions (e.g. 470 x 320):

var DELTA = 100
var DURATION = 200
var $move = $('#move')
var $frame = $('#frame')

var correctDelta = {
  _cap: function (delta, position, limit) {
    return delta < 0
      ? Math.max(delta, -position)
      : Math.min(delta, limit - position)
  },

  left: function (delta) {
    return this._cap(
      delta,
      $move.position().left,
      $frame.innerWidth() - $move.width()
    )
  },

  top: function (delta) {
    return this._cap(
      delta,
      $move.position().top,
      $frame.innerHeight() - $move.height()
    )
  }
}

var animate = function (prop, delta) {
  var corrected = correctDelta[prop](delta)
  var animation = {}

  animation[prop] = '+=' + corrected + 'px'

  $move.animate(animation, {
    queue: false,
    duration: DURATION * Math.abs(corrected / delta)
  })
}

$('#left').click(function () {
  animate('left', -DELTA)
})

$('#right').click(function () {
  animate('left', DELTA)
})

$('#up').click(function () {
  animate('top', -DELTA)
})

$('#down').click(function () {
  animate('top', DELTA)
})
1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.