JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-layout-south"> 
 
  <button onclick="myLayout.toggle('north')">Toggle North Pane</button> 
 
</div> 
 
 
 
<div class="ui-layout-east"><span>Components</span> 
 
  <div class="component" style="width: 30px; border: 2px solid #CCC; background: #009; padding: 10px;"></div> 
 
  <p><button onclick="myLayout.close('east')">Close Me</button></p> 
 
</div> 
 
 
 
<div class="ui-layout-center" style="height:499px;"> 
 
 this is destination
 
</div>

JavaScript

jQuery(".component").live("mouseover", function() { 

      jQuery(this).draggable({ 
  //  use a helper-clone that is append to 'body' so is not 'contained' by a pane 
    helper:  function () { return jQuery(this).clone().appendTo('body').css({'zIndex':5,}).show(); }, 
    cursor: 'move' 
  });   
   
});
 
  jQuery('.ui-layout-center').droppable({  
     accept:  '.component', 
     drop:  function (event, ui) {jQuery(this).append(jQuery(ui.draggable).clone()); } 
  });