JSFiddle - React, Tailwind, and code Playground
by FirstBug
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://layout.jquery-dev.net/download/jquery.layout-1.2.0.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var bodyLayout=$('body').layout({
// using custom 'ID' paneSelectors
north__paneSelector: "#north_box"
, west__paneSelector: "#west_box"
, center__paneSelector: "#center_box"
,applyDefaultStyles: true
,slidable : false
,slideTrigger_open : "mouseover"
,spacing_closed: 10
,spacing_open:10
,paneClass : "ui-widget-content"
});
bodyLayout.sizePane("west", 200);
}
);
function addDiv()
{
var newContainer=$('<div class="ui-widget-content" style="display:block;position:absolute;top:50px ;left:100px;width:100px;height:100px;border:1px solid red;"><h3 class="ui-widget-header">Resizable</h3></div>');
$("#center_box").append(newContainer);
newContainer.draggable({ appendTo: "body",
helper: "clone",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}});
newContainer.resizable(
{
handles: 'all' ,
autoHide: true
}
);
}
</script>
</head>
<body>
<div id="north_box"...