JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<h4>Click and drag:</h4>
<div id="drg">
 #drg box<br />
 <div id="prt">
     <img src="http://p1.pichost.me/i/25/1483610.jpg" alt="Rhomb" width="80" height="70" id="im" />
 </div>
</div>
<button id="enable">Enable Dragging</button>
<button id="disable">Disable Dragging</button>

CSS

#drg {
 width:380px;
 height:210px;
 border:2px solid blue;
}
#prt {

}
#prt p { width:185px; margin:1px; background:#a7daa8; }

JavaScript

// sets two variables to store the X and Y position
var xpos; var ypos;

$(document).ready(function() {
  // sets draggable the element with id="dg"
    $("#disable").on('click', function() {
        $( "#im" ).draggable( "disable" );
    });
    $("#enable").on('click', function() {
        $('#im').draggable({
     		 containment: "#drg"
  		});
        $( "#im" ).draggable( "enable" );
    });
});