JSFiddle - React, Tailwind, and code Playground

by dariospagnolo

HTML

<script src="https://cdn.jsdelivr.net/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.layout/1.4.3/jquery.layout.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<body>
  <div class="ui-layout-center">
  <iframe id="preview" width="100%" height="100%" srcdoc="<div id='ossBlocks'><div class='ossWrapper'></div><div class='ossWrapper'></div><div class='ossWrapper'></div><div class='ossWrapper'></div><div class='ossWrapper'></div><div class='ossWrapper'></div></div><style>    .ossWrapper {
      height: 100px;
      background-color: green;
      border: 1px solid white;
    }</style>"></iframe>


  </div>
  <div class="ui-layout-north">
    North
  </div>
  <div class="ui-layout-west" style="background: #fff;">
    <ul id="blockTypes">
		  <li class="blck b001">
        <div>B001</div>
        <div id="b001" style="display: none;">
          Hoho
        </div>
      </li>
    </ul>
    <div style="clear: left"></div>
  </div>
</body>

CSS

li.b001 {
      background-position: center -238px;
    }

JavaScript

var myLayout = $('body').layout({
      default: {
        applyDefaultStyles: true,
        spacing_open: 0,
        spacing_closed: 0
      },
      north: {
        applyDefaultStyles: true,
        spacing_open: 0,
        spacing_closed: 0,
        showOverflowOnHover: true
      },
      west: {
        slidable: false, 
        applyDefaultStyles: true
      }
    });
		myLayout.sizePane("west", 260);
		myLayout.sizePane("north", 50);
		$('body > div').css('border', '0 solid white');
    
function initDraggable() {
  $("ul#blockTypes li").draggable({
  	iframeFix: true,
    iframeOffset: $('iframe#preview').offset(),
  	cursor: 'move',
    helper: function (evt, ui) {
      return $(this).clone().appendTo('body').css('zIndex',5).show();
    },
    connectToSortable: $('iframe#preview').contents().find('#ossBlocks'),
    cursorAt:{top:0,left:0}
  });
}
initDraggable();
$('iframe#preview').contents().find("#ossBlocks").droppable({
drop: function(e, ui) {
//alert("nono");
}
});
$('iframe#preview').contents().find('#ossBlocks').sortable({
	iframeFix: true,
  cursorAt:{top:0,left:0} 
});
//$("ul#blockTypes li").on('dragstop',autoResize);

function autoResize(){
    var newheight;
    if(document.getElementById){
        newheight=document.getElementById('preview').contentWindow.document .body.scrollHeight;
    }
    newheight=newheight+100;
    $('#preview').css('height',newheight);
}