JSFiddle - React, Tailwind, and code Playground

by Arron Hyman

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- Drag Larger Child Div To The Edges Of Parent -->
<!-- Overflow:hidden on parent to get desired effect -->
<div id="parent">
	<div id="dragx" class="drag">
  </div>
</div>

CSS

body{
height:900;
}

.drag {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 10px;
    text-algin: center;
    background: rgba(0,0,0,.8);
}

#parent{
  width:500px;
  height:300px;
  border:3px solid black;
  background:transparent;
  margin: 0 auto;
  z-index: 1;
  margin-top:100px;
 }

JavaScript

$(function () {
	$("div[id='dragx']").draggable({
    drag : function(event,ui){
      var parent = ui.helper[0].parentNode;

		  var dragWidth = ui.helper[0].clientWidth;
      var parentWidth = parent.clientWidth;
      var dragHeight = ui.helper[0].clientHeight;
      var parentHeight = parent.clientHeight;
      
      var widthDifference = dragWidth - parentWidth;
      var heightDifference = dragHeight - parentHeight;
      
      if(ui.position.left > 0) ui.position.left = 0;
      else if(ui.position.left < -widthDifference) ui.position.left = -widthDifference;
      
      if(ui.position.top > 0) ui.position.top = 0;
      else if(ui.position.top < -heightDifference) ui.position.top = -heightDifference;
      
      }
	});
});