JSFiddle - React, Tailwind, and code Playground

by Suhaib Janjua

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div id="wrapper">
    <div id="Parent">
         <h4 class="ui-widget-header">Parent</h4>

        <div id="Child">
             <h4 class="ui-widget-header">Child</h4>

        </div>
    </div>
</div>

CSS

#wrapper {
    width: 800px;
    height: 800px;
    background: Yellow;
}
#Parent {
    width: 250px;
    height: 250px;
    background: grey;
    top: 100px;
    left: 100px;
}
#Child {
    width: 100px;
    height: 100px;
    background: white;
    top: 0px;
    left: 50px;
}

JavaScript

$(function () {
     $('#Parent').draggable({
         cursor: 'move',
         containment: 'parent'
     });

     $("#Child").draggable({
         cursor: 'move',
         containment: 'parent'
     });
 });