JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/9170">#9170</a>: Disabling an outer resizable also disables inner resizable elements.</p>

<div id="outer">
    Outer
    <div id="inner">Inner</div>
</div>

<button>Disable</button>

CSS

#outer{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
#inner{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

JavaScript

$( "button" ).click(function(){
    $( "#outer" ).resizable( "option", "disabled", true );
    console.log($('#outer').data());
});    

$( "#inner, #outer" ).resizable();