JSFiddle - React, Tailwind, and code Playground

by Manuel

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Splited Window</title>
<link href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
</head>
<body>
  <div id="header"></div>
  <div id="main-content">
    <div id="main-left">a</div>
    <div id="main-center">
      <div id="main-center-inner" class="ui-widget">
        <div class="window window-splited">
          <h3 class="ui-widget-header">Title 1</h3>
          <div class="part">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat venenatis nulla, et gravida nulla posuere a. Curabitur nec dolor nisi, ut semper est. Suspendisse ac aliquam
              ante. Aliquam suscipit, nisl rhoncus feugiat pulvinar, arcu ante viverra tellus, eu lobortis dui felis sit amet nisl. In non lacus in neque rutrum cursus ut id libero. Duis non leo sem,
              et congue leo. Vestibulum sed purus ut lacus dictum sollicitudin sit amet in orci. Aliquam at bibendum nibh. Cras non tempor velit. Mauris lacinia, magna nec laoreet cursus, eros enim
              ullamcorper mauris, sit amet vulputate erat metus a nulla. Sed non turpis orci. Nullam sit amet sem vitae magna scelerisque volutpat. Proin ultricies pretium nulla non hendrerit. Integer
              pulvinar urna sed justo fringilla tempus.</p>
          </div>
          <div class="part">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat venenatis nulla, et gravida nulla posuere a. Curabitur nec dolor nisi, ut semper est. Suspendisse ac aliquam
              ante. Aliquam suscipit, nisl rhoncus feugiat pulvinar, arcu ante viverra tellus, eu lobortis dui felis sit amet nisl. In non lacus in neque rutrum cursus ut id libero. Duis non leo sem,
              et congue leo. Vestibulum sed...

CSS

@CHARSET "UTF-8";

#main-left {
  background-color: blue;
}

#main-center {
  background-color: white;
  border: 1px black solid;
  margin: 0;
  padding: 0;
  text-align: center;
}

#main-center-inner {
  height: 800px;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 800px;
}

#main-right {
  background-color: red;
}

.window {
  background-color: white;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.window-splited * {
  margin: 0;
  padding: 0;
}

.window-splited .part {
  padding: 5px;
}

h3.ui-widget-header {
  margin: 0 0 10px;
  text-align: center;
}

JavaScript

function logme(data) {
    if (typeof console != 'undefined') { /* Commenter la ligne suivante pour faire taire tous les logme ;o) */
        console.log(data);
    }
}
$(function() {
    $(".window").draggable({
        containment: "#main-center-inner",
        scroll: true,
        start: function() {
            $(".window").css("z-index", "0");
            $(this).css("z-index", "500");
        }
    });

    /* Splited window */
    logme($(".window-splited .part").size());
    $(".window-splited").addClass("ui-widget");
    $(".window-splited").each(function(index, element) {
        var e = $(element);
        e.css("border", "5px ridge grey");
        var part_el = $(".part", e);
        logme(part_el.size());
        part_el.addClass("ui-content");
        part_el.css("float", "left");
        part_el.css("border", "1px red solid");
        resizeMe(e);
    });

    $(".window-splited").resizable({
        resize: function(event, ui) {
            resizeMe(ui.element);
        },
        containment: "#main-center-inner"
    });

    function resizeMe(e) {
        var w = 0;
        var part_el = $(".part", e);
        var nbpart = part_el.size();
        if (nbpart > 1) {
            w = (e.width() / nbpart) - (e.outerWidth(true) - e.width() + 1);
            w = w - (w / 100);
            part_el.width(w);
        }
        console.log(w);
    }

    var containment_draggable = $(".window").draggable("option", "containment");
    var maxheight = $(containment_draggable).height() / 2;
    var maxwidth = $(containment_draggable).width() / 2;
    $(".window").each(function(i, e) {
        if (maxheight < $(e).height()) {
            $(e).height(maxheight);
        }
        if (maxwidth < $(e).width()) {
            $(e).width(maxwidth);
        }
    });

    var containment_resizable = $(".window-splited").resizable("option", "containment");
    maxheight = $(containment_resizable).height() / 2;
    maxwidth = $(containment_resizable).width() / 2;
   ...