Contain a large draggable child div inside smaller parent div

Question

I would like to prevent a larger div from being dragged out of smaller div, like facebook does with it's profile images. Does anyone have an idea of how I would go about to do this?

All the best, Laurens

In the following link I give an example of what i mean.

draggable_outside

PS: I'm sorry, I didn't get the JS section to work in the code snippet, it's my first post. I wrote it as a script in the HTML section.

.wrapper {
  width: 400px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background: gray;
  display: block;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  display: block;
  background: blue;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('.child').draggable();
  });
</script>

<div class="wrapper">
  <div class="parent">
    <div class="child">
    </div>
  </div>
</div

Answer 1

You can use jQuery draggable function as follows. Here in drag event we reset x and y if they cross the boundaries.

See the fiddle here

.wrapper {
  width: 400px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background: gray;
  display: block;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  display: block;
  background: blue;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript">
 
 $(document).ready(function(){
  
     $('.child').draggable(
    {
         
        drag: function(event, ui) {
             var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
         //   console.log(xPos);
        //     console.log(yPos);
      if(ui.position.left>250) 
      { 
        ui.position.left=250;
      }
      if(ui.position.left<-40) 
      { 
        ui.position.left=-40;
      }
       if(ui.position.top<-90) 
       { 
       ui.position.top=-90;
      } 
      
     if(ui.position.top>200) 
     { 
      ui.position.top=200;
     }
   
  }
  });

  });
   
    
    
    
   
</script>
<div class="wrapper">
  <div class="parent">
    <div class="child">
    </div>
  </div>
</div