JSFiddle - React, Tailwind, and code Playground

by Owaiz Yusufi

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="wrapper">
  <div id="templateWrapper">
    <div id="textTemplate" class="template">
        <div>Text</div>
    </div>
  </div>
  <div id="editorBlock">
    <div id="editorDesignView"></div>
  </div>
</div>

CSS

* {box-sizing: border-box;}
#wrapper {width: 100%; height: 610px;}
#templateWrapper {width: 30%; height: 100%;float:left;overflow-y: scroll;}
#editorBlock {width: 70%; height: 100%;float:left;position: relative;background-color:#f1f1f1}


#editorDesignView {width: 100%; height: 100%;}

JavaScript

$(function(){
  
  $("#textTemplate").draggable({
    helper: "clone",
    zIndex: 2500,
  });
  $( "#editorDesignView" ).droppable({
  		accept: '#textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:20px; background: #000;" class="draggable-area"></div></div>';
  $(html).appendTo(this).hide().slideDown();
  
      }
    });
  $('#editorDesignView').sortable({
  handle: '.draggable-area'
  });
  

});