JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="restricted-field-1">should be restricted here</div>
  <div class="dragme">DRAG ME</div>
  <div class="restricted-field-2">should be restricted here</div>
</div>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

CSS

.container{
  position:relative;
  width: 500px;
  height: 400px;
  background: #FFF;
}

.dragme{
  width: 100px;
  cursor: move;
  background: black;  
  color:white;
  text-align:center;
}
.restricted-field-1{
  width:480px;
  background: silver;
  padding:10px;
  
}
.restricted-field-2{
  position:absolute;
  width:480px;
  bottom:0;  
  padding:10px;
  background: silver; 
  
  
}

JavaScript

var containmentTop = 45; // based on height of '.restricted-field-1'
var containmentBottom = $(".restricted-field-2").position().top - 10;
var xStartPosition = 9;
var xEndPosition = 408;
$(".dragme").draggable(
		{
    	containment : [xStartPosition,containmentTop,xEndPosition,containmentBottom] 
    }
);