JSFiddle - React, Tailwind, and code Playground

by antishok

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
No containment at start. Click Parent. Watch it stay contained. Click False. Watch it stay contained anyway.<br /><br />
<input type="button" id="parent" value="Parent" />
<input type="button" id="false" value="False" /><br /><br />
<div id="main">
  <div id="drag"></div>
</div>

CSS

body {
  padding: 50px;
}
#main {
  width: 500px;
  height: 300px;
  background-color: #EFEFEF;
}

#drag {
  width: 100px;
  height: 100px;
  background-color: #000;
}

JavaScript

$('#drag').draggable();

$('#parent').on( 'click', function() {
  $('#drag').draggable('option', 'containment', 'parent' );
});

$('#false').on( 'click', function() {
  $('#drag').draggable('option', 'containment', false );
});