JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<div class="parent">


<div class="left">
  <div class="draggable"></div>
</div>

<div class="right">

</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

CSS

.draggable {
  width: 50px;
  height: 50px;
  background-color: #333;
}


.parent{
  height:100px;
  overflow:hidden;
}
.right {
  float: right;
  width: 80%;
  height: 100px;
  background-color: pink;
}

JavaScript

(function() {


	$('.draggable').draggable();

})(jQuery);